全宽度背景响应网站

我遇到了一个问题，我不能完全弄清楚如何解决使用CSS只。全宽度背景响应网站

在响应的网页我有每一页上全宽背景下，以下CSS加载到一个div类（BG）：

.bg{ 
    position:fixed; 
    top:0px; 
    z-index:-999; 
    width:100%; 
    height:100%; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    }

问题不过是，这些图像将如果页面内容很长，则会在移动设备上造成问题。（背景将展开以涵盖所有页面内容，甚至是屏幕外的内容），这意味着我通常只会在背景中看到我背景左上角的污迹。

因为我还需要这是有点向后兼容（IE 8+）我不能CSS3的“盖”只能靠所以我已经用完了免费脚本的解决方案。

任何提示/想法将大大appriciated！

来源

2013-04-11 user2269500

这里有一个可调整大小的背景一个不错的文章http://css-tricks.com/how-to-resizeable-background-image/ – 2013-04-11 09:02:52

尝试使用媒体查询：http://www.w3.org/TR/css3- mediaqueries /这些在IE8中将被忽略，但您可以使用它们在移动设备上缩小图像。 – gaynorvader 2013-04-11 09:05:59

@gaynorvader：当调整图像，并使用媒体查询我将不得不补偿页面的高度，这将是不可能的，因为内容是动态的，从而高度变化。（它也改变取决于屏幕大小） – user2269500 2013-04-11 09:12:26

你可以尝试使用一个CSS元素在身上的标签，像这样

#background {
背景图像：网址（ 'URL /到/图像/ choice.jpg的/'）;
background-repeat：repeat-y;
}

这是所有在CSS1所以它应该是向后兼容。
您可以将此添加到您的bg或其他选择的课程或ID中。

来源

2013-04-19 13:10:52 dragonloverlord

全宽度背景响应网站

回答

相关问题