CSS3 div background-image autoresize

我在这里寻找很多帖子在stackoverflow，但没有什么，可以帮助我。也许这个问题是微不足道的，但我不知道该怎么做，因为我在这个初学者CSS3 div background-image autoresize

所以我有一些头，其中是徽标，菜单和一些标题 - 这不是问题。在这个标题下，我有div类滑块，在那里我想要一些背景图片，并且在这个背景图片上我想要一些按钮和标题以及另一个图片。最后是我的问题。

如果我希望在桌面上显示任何屏幕分辨率的全宽和自动高度（标题末尾到屏幕末端的高度）的此背景图像，我该怎么做？

我的意思是：如果我有分辨率1920x1080我想从头到结尾的屏幕结束这个bg图像。对于例如1366x768等等的分辨率，同样的东西......我希望你能理解我的问题。在此 image

部首

实施例是红色的。我想要bg-image（在这种情况下，图像的白色部分，但我想有图像）自动调整任何屏幕分辨率。

我真的很希望你明白我的问题，有人可以帮助我。

真的感谢任何答复

http://jsfiddle.net/YKY4t/

我在代码中的一些错误，所以请...

代码：

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300,700); 

body { 
margin: 0; 
padding: 0; 
} 
.mainheader { 
width: 100%; 
height: 10%; 
background-color: #ff5959; 
position: absolute; 
} 
.mainheader img { 
max-width: 100%; 
height: auto; 
margin-left: 20%; 
margin-top: 1.5%; 
float: left; 
} 
.title { 
position: absolute; 
margin-top: 1%; 
margin-left: 22%; 
font-size: 35px; 
font-family: 'Quicksand', sans-serif; 
color: #ffffff; 
} 
.meta { 
position: absolute; 
margin-left: 18%; 
margin-top: 3%; 
font-size: 19px; 
font-family: 'Quicksand',sans-serif; 
font-weight: bold; 
color: #ffffff; 
} 
.nav { 
position: absolute; 
right: 20%; 
margin-top: 1%; 
font-size: 19px; 
font-family: 'Quicksand', sans-serif; 
font-weight: bold; 
} 
.nav li { 
list-style-type: none; 
float: left; 
} 
.nav li a { 
color: #ffffff; 
text-decoration: none; 
display: block; 
margin-left: 25%; 
} 
.slider img { 
background-image: url(../img/slider-image.png); 
background-repeat: no-repeat; 
background-position: center center fixed; 
background-size: cover; 
}

来源

2015-10-14 predik

对不同屏幕使用媒体查询分辨率：@media all和（min-width：/ *最小分辨率显示此背景* /）{/ *您的CSS代码* /} – GmloMalo

正如我评论，你可以使用媒体查询您可以使用不同分辨率图像的不同屏幕尺寸。在这种情况下：

@media all and (min-width: 1920) { 
    .img-holder img{ 
     background-img: url(../img/slider-image.png); 
    } 
} 

@media all and (min-width: 1366) { 
    .img-holder img{ 
     background-img: url(../img/slider-image-medium.png); 
    } 
}

您可以使用它们来使用要覆盖所有屏幕分辨率。你也可以使用任何响应式框架，如响应图像的Bootstrap。

来源

2015-10-14 16:02:02 GmloMalo

CSS3 div background-image autoresize

回答

相关问题