如何使一个长页面网站的CSS响应背景img

问题描述：

我已经尝试了两天，现在让背景img响应手机。这是一个长的主页（大约8000px）。整个页面的内容有一个div父“background_div”。我已经尝试了两种，尺寸封面或包含标签，img超过pixaleted，就像它会放大，内容是响应，但背景img让我头痛。我需要它来识别设备宽度，缩小并保持固定不会沿着8000px长的页面拉伸。任何人都能给我一个想法吗？如何使一个长页面网站的CSS响应背景img

#background_div { 
 
\t background-image: url('home.jpg'); 
 
\t background-repeat: no-repeat; 
 
\t background-position: center; 
 
\t -webkit-background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t -o-background-size: cover; 
 
\t background-size: cover; 
 
\t background-attachment: fixed; 
 
} 
 

 
/*It just won't scale to the divice width and height*/

<div id="background_div">

答

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

这些设置为盖是要伸展图像以适合容器，不管它有多大。这是什么导致你的伸展。

将它们设置为auto，或者根本不要设置它们，如果您希望图像保留其原始大小。

它运作良好，在笔记本电脑，尽量减少检查，如果它的响应，但现在我的手机上，它就会为中心，以中，只占据一小部分离开页面的大部分白色的时候，我是新来响应CSS ，你能再给我一个关于如何完成这个任务的建议吗？ – Horatiu

找到一个体面的解决方案，它需要一些小的改变，但似乎它的工作， – Horatiu

答

CSS2

如果需要使图像更大，必须编辑图像本身在图像编辑器。

如果您使用img标签，您可以更改大小，但如果您需要将图像作为其他内容的背景，则不会给您想要的结果（并且它不会像您似乎想要的那样重复）...

CSS3释放权力

这是可能与背景大小CSS3做。

所有的现代浏览器都支持这个功能，所以除非你需要支持旧浏览器，否则这就是实现它的方法。

支持的浏览器：

的Mozilla Firefox 4.0+（壁虎2.0+）时，Microsoft Internet Explorer 9.0以上，歌剧10.0+和Safari 4.1+（webkit的532）和Chrome 3.0+。

#background_div { 
    /* width: will stretch to width/height of element */ 
    background-size: 100% 100%; 
}

如何使一个长页面网站的CSS响应背景img

相关推荐