CSS中如何设拉伸背景图片铺满屏幕

Question

我写的CSS代码是
#bg
{

width: 100%;
height: 100%;
background:url(images/beijing.png);

}
这样子他会重复图片铺满屏幕，我想要让他拉伸图片铺满屏幕，应该怎么写呢？

Answer 1

#bg
{

width: 100%;
height: 100%;
background:url(images/beijing.png) repeat;

}追问

为什么还是不行QAQ

追答

明白你的意思了，图品智能被重复延伸，不会放大，你的意思应该是把图片放大，你可以把图片用ps工具放大，然后在加进去，你也可以把图片弄得很小，比如说只有几个像素那样拉伸起来就不会不好看了，具体得看看你的图片是什么样子的！

追问

那如果不同的电脑分辨率不一样的话，到别的电脑上又会重复延伸了吧？

Answer 2

CSS30背景属性之背景图片的引入和大小的设置

Answer 3

background:url(images/beijing.png) repeat;加个属background-size:100%;background:url(images/beijing.png) no-repeat。

Answer 4

其实这里的答案都很好，但是有点本来是正确的，但是代码顺序写反了就会出错

例如：

background:url(images/beijing.png) repeat;
加个属background-size:100%;background:url(images/beijing.png) no-repeat;

这个答案，要将

background-size:100%;

这个代码写在

background:url(images/beijing.png) no-repeat;

的后面才会覆盖整个body

background-size:100%; 也可以写成 background-size: cover,同理要写在

background:url(images/beijing.png) no-repeat;的后面

Answer 5

margin:0px; background: url(bg.jpg) no-repeat; background-size:100% 100%; background-attachment:fixed;

CSS拉伸背景图片铺满屏幕