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;
}

全宽背景图像大小

1 个答案: