CSS背景图片在某些浏览器上不是全尺寸的

时间:2013-01-14 12:38:45

标签: css css3 responsive-design

我正在为我姐姐的婚礼做一个小小的演示,我基本上想要在用户向下滚动页面时将身体背景设置为不同的图像。

Here is a functioning version of the page.

该过程本身可以正常工作,但是:

运行Chrome的桌面Mac(浏览器宽度约为1900像素)

虽然背景保持固定(应该如此),但图像不会在整个页面上延伸。

Screenshot of this problem

手机(机器人铬)

背景图像不会保持固定(当用户向下滚动时,背景图像会留下)。有趣的是,我的笔记本电脑浏览器无法通过缩小窗口来重现这一点 - 可能是移动浏览器本身的限制?

Screenshot of this problem

对我在这里缺少什么的想法?

2 个答案:

答案 0 :(得分:1)

图像宽度为1200像素。因此,在1900分辨率下,图像不会拉伸,而且更小:)。如果你使用background-size:100%;它应该伸展。

至于手机:This question is the same issue as you with solution.

答案 1 :(得分:0)

设置

width:100%
margin-left:auto;
margin-right:auto;

在您的图片标记或div中

如果100%不起作用,请使用px作为宽度