设置全屏的背景图片

最新推荐文章于 2024-08-28 09:59:21 发布

Radic_Feng

最新推荐文章于 2024-08-28 09:59:21 发布

阅读量1.4w

点赞数

分类专栏： Web前端文章标签： css html image 浏览器 url

本文链接：https://blog.csdn.net/Radic_Feng/article/details/6723043

版权

Web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

关键词：Full size stretched background image，CSS 2和CSS 3的实现

我们有时期望背景图片自动拉伸占据所有空间，使用CSS 3做起来并不麻烦，定义如下的CSS：

body {
	background:#3d71b8 url(../back_main.png);
	background-size: 100%;
	background-position:center;
}

但是background-siz是CSS 3的属性，并不是所有的浏览器都支持。使用CSS 2的一种实现如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Welcome to my blog</title>
	<style type="text/css">
	#bg {
		position:fixed; 
		top:0; 
		left:0; 
		width:100%; 
		height:100%;
	}

	#bg img {
		position:absolute; 
		left:0; 
		right:0; 
		bottom:0; 
		margin:auto; 
		width:100%;
		height:100%;
		z-index:-1;
	}
	</style>
</head>
<body>
	<div id="bg">
		<img src="back_main.png" alt="">
	</div>
	<div>
	Your content goes here!
	</div>
</body>
</html>