CSS3 div背景图像自动调整大小

Question

我在stackoverflow上寻找许多帖子，但是没有什么可以帮助我。也许这个问题是微不足道的，但我不知道怎么做，因为我是初学者。

所以我有一些标题，其中是徽标，菜单和一些标题-这不是问题。在这个header下，我有div类slider，我想有一些背景图像，在这个背景图像上，我想有一些按钮和标题和另一个图像。这是我最后的问题。

我该怎么做，如果我想有这个背景图像的这个div全宽和自动高度(高度从头部结束到屏幕结束)在桌面的任何屏幕分辨率?

我的意思是:如果我有分辨率1920x1080，我想有这个大图像从头部结束到屏幕结束。分辨率也是一样，比如1366x768等等。我希望你能理解我的问题。

关于这个的例子图片

标头为红色。我想让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;
}

Answer 1

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

@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响应图像。