Question

我想要将图像设置为尺寸为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;
}

Answer 1

不确定我是否理解正确：

要使图像适合全屏，请使用CSS属性：

background-size:100% 100%;

但请注意，如果尺寸不正确，它会拉伸图像

Answer 2

警告

避免搞乱浏览器缩放或其他与浏览器相关的功能，因为这样做可能会降低用户体验，特别是对于依赖自己喜欢的浏览器的这些功能的用户而言！

也就是说，无论浏览器缩放如何，我知道一个元素来保持其大小的唯一方法是让一个容器元素占据所有屏幕，并且内部元素具有百分比度量，就像这样。

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

Answer 3

删除CSS，它应该工作。这应该是你所需要的一切。

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

请参阅我的示例

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

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

3 个答案: