即使页面放大或缩小，如何保留固定的背景图像大小？

我有一个图像，我想设置为我的背景与尺寸1x700。即使页面放大或缩小，如何保留固定的背景图像大小？

这是一种渐变的图像，所以我需要它到repeat-x。

我遇到的主要问题是图像没有填满整个页面。但是，它仍然是固定的。具体来说，当我滚动出来时，我可以看到图像没有填满整个页面。

我在firefox和chrome中工作的代码，但没有在IE9中工作。如果这有什么不同，我也将这个皮肤应用到dotnetnuke。

这里是我的代码：

body 
{ 
    background-image: url('images/bg.jpg'); 
    background-attachment: fixed; 
    background-repeat: repeat-x; 
    background-size: contain; 
    -moz-background-size: contain; 
}

来源

2011-07-19 Jacob Cunningham

警告

避免使用浏览器缩放或其他浏览器相关功能搞乱了，造成这样做可能会降低用户体验，expecially对谁依靠用户在他们最喜欢的浏览器的这些功能！

这就是说，不管浏览器缩放的，我知道一个元素的唯一方式十个分量它的大小是由具有容器元素占据所有的屏幕，并有个措施，这样里面的元素。

http://jsfiddle.net/yLFj8/4/

来源

2011-07-19 15:40:50

剥离下来的CSS，它应该工作。这应该是你需要的一切。

body { 
    background-image: url('images/bg.jpg'); 
    background-repeat: repeat-x; 
}

看到这里我的例子

http://jsfiddle.net/jasongennaro/fSG7j/1/

来源

2011-07-19 16:47:21

不知道如果我理解正确：

以适应图像全屏显示，使用CSS属性：

background-size:100% 100%;

但是请注意，如果尺寸不符合要求，它会拉伸图像rect

来源

2013-12-29 02:40:54 Lenny

即使页面放大或缩小，如何保留固定的背景图像大小？

回答

相关问题