我正在寻找修复我的第二个全宽图像(页面中间的那个),以便它与标题图像中的上方图像水平对齐。我注意到图像的右侧有一个间隙,如下图所示。这是因为我的图像不是 1600 像素宽吗?如果需要,我可以将其编辑为 1600px。如果问题出在其他地方,有人可以帮助我。谢谢。
.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;
}
<div class="fullWidthSectionBG">
<div class="fullWidthSection">
<div class="myLeftColumn">
<p>
</p>
</div>
<div class="myRightColumn">
<h2>Used By Thousands Of Canadians</h2>
<p>Jobspark.ca is dedicated to providing resources for job seekers and employers throughout British Columbia and Alberta. Many top employers along with small local businesses from across the region post their jobs on Job Spark to find qualified professionals.</p>
<p>Job Spark simplifies your quest for the perfect career with a clean design and real-time postings. Our streamline job board was designed to take the headache out of finding a job.</p>
<p>Your job listings will be seen across multiple venues, receiving thousands of views each month! </p></div>
</div>
</div>
最佳答案
如今,您可以将其添加到您的 CSS 样式中:
background-size: cover;
那么你就不用太担心图片的大小了。它在旧版浏览器中不起作用,但如今这已成为小事。
这可能不是您想要的外观,但在这种情况下,请尝试调整图像的大小(在这种情况下,可能降低它的高度)。还有其他背景大小选项,值得一试。
关于css - 全宽背景图像大小问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16683124/