css - 全宽背景图像大小

Question

我正在寻找修复我的第二个全宽图像(页面中间的那个)，以便它与标题图像中的上方图像水平对齐。有人可以仔细检查我的 CSS，看看它是否正确。它需要像上面的标题图片一样自动调整大小以适合屏幕。当我在手机上查看它时，它不适合。谢谢参观。

http://www.jobspark.ca

.fullWidthSectionBG { 
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
border-bottom: solid 1px #ddd; 
border-top: solid 1px #ddd;
margin-left: -1600px;
margin-right: -1600px;
padding-top:20px;
padding-bottom:330px;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: auto; 
} 

Answer 1

我认为您需要将高度添加到您的 div。这是 fiddle .我刚刚向 div 添加了一个高度，现在它可以很好地调整大小......这是你需要它做的吗？

.fullWidthSectionBG { 
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
width:100%;
background-position:center;
height:575px;
}

更新的 css(仍然调整大小)

.fullWidthSectionBG { 
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position: bottom center;
background-size: cover;
height:575px;
background-attachment: scroll;
background-repeat: no-repeat;
}