全宽背景图像尺寸问题

时间:2013-05-22 03:44:17

标签: css web background-image fullscreen

我希望修复我的第二个全宽图像(页面中间的那个),使其与标题图像中的上一个水平相同。我注意到图像右侧有一个间隙,如下图所示。这是因为我的图像不是1600px宽吗?我可以编辑它,如果需要它是1600px。如果问题是其他问题,有人可以帮助我。谢谢。

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


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

1 个答案:

答案 0 :(得分:-1)

现在,您可以将其添加到CSS样式中:

background-size: cover;

然后您不必过于担心图像的大小。它在旧版浏览器中不起作用,但现在这是一件小事。

这可能不是你想要的样子,但在这种情况下,尝试调整图像大小(在这种情况下,可能会降低它的高度)。还有其他背景大小的选项,值得一试。