即使页面放大或缩小，如何保持固定的背景图像尺寸？
我想将一张尺寸为 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;
}
I have an image that I want to set as my background with dimensions 1x700.
It is a gradient sort of image so I need it to repeat-x.
The main problem I am having is that the image is not filling the entire page. It is, however, remaining fixed. Specifically when I scroll out I can see that the image is not filling the entire page.
The code I have works in firefox and chrome, but not in IE9. I am also applying this skin to dotnetnuke if that makes any difference.
Here is my code:
body
{
background-image: url('images/bg.jpg');
background-attachment: fixed;
background-repeat: repeat-x;
background-size: contain;
-moz-background-size: contain;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
警告
避免干扰浏览器缩放或其他浏览器相关功能，因为这样做可能会降低用户体验，特别是对于依赖其喜爱的浏览器的此类功能的用户！
也就是说，我知道无论浏览器缩放如何，元素保持其大小的唯一方法是让容器元素占据整个屏幕，并让内部元素具有百分比度量，就像这样。
http://jsfiddle.net/yLFj8/4/
WARNING
Avoid messing up with browser zooming or other browser-related features, cause doing so may reduce the user experience, expecially for users who rely on such features of their favorite browser!
That said, the only way I know of an element to mantain its size regardless of browser zooming is by having a container element to occupy all the screen, and the inside element to have percentage measures, like this.
http://jsfiddle.net/yLFj8/4/
去掉 CSS 就可以了。这应该就是您所需要的。
请参阅我的示例
http://jsfiddle.net/jasongennaro/fSG7j/1/
Strip down the CSS and it should work. This should be all you need.
See my example here
http://jsfiddle.net/jasongennaro/fSG7j/1/
不确定我是否理解正确：
要使图像适合全屏，请使用 CSS 属性：
但是请注意，如果尺寸不正确，它将拉伸图像
Not sure if I understand correctly:
To fit the image to full screen, use the CSS property:
However note that it will stretch the image if the size is not correct