设置全屏的背景图片

关键词: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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值