创建全宽图像

Question

我希望我的图像边缘能够拉伸屏幕的宽度。不是为了成为一个完整的背景。

我的网站是www.jobspark.ca

<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

.fullWidthSectionBG { 
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position:center;
background-repeat: no-repeat;  
height:575px;
margin-left: -1600px; 
margin-right: -1600px;  
}

这个答案很接近但是网站的其余部分并非全屏扩展。

#site > .wrapper {
max-width: 960px;
padding: 0 50px;
margin: 0 auto;
position: relative;
}

将960px更改为100％

＆安培;摆脱

margin-left: -1600px;
margin-right: -1600px;

我几天来一直在与这个问题作斗争，并且很高兴能够解决问题。可能需要缩小以查看问题。

Answer 1

添加

怎么样？

width: 100%;

你的css规则和摆脱边缘？比如this

这是你的问题吗？

Answer 2

#site > .wrapper {
  max-width: 960px;
  padding: 0 50px;
  margin: 0 auto;
  position: relative;
}

将960px更改为100％

＆安培;摆脱

margin-left: -1600px;
margin-right: -1600px;

Answer 3

为了达到这个目标，我通常会定义一个div元素，它符合我希望我的背景图像填充的确切大小和位置。

然后使用css属性为background-size：cover;此Cover属性会自动缩放图像，以确保整个背景区域实际上被图像“覆盖”。 see the documentation here

here is a jsfiddle of an example of this method working

同样值得注意的是在居中的固定宽度区域之间实现间歇的全宽区域我喜欢使用这种定义.wrapper类的方法与你的非常类似。然后结束整个宽度区域的包装器，然后再次重新启动它

我对您的代码的调整如下：

CSS

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

HTML

<div class="wrapper">
     <!-- HEADER HERE -->
</div>

<div class="fullWidthSectionBG">
     <div class="wrapper">
          <!-- FULL WIDTH BANNER CONTENT HERE -->
     </div>
</div>

<div class="wrapper">
     <!-- BODY HERE -->
</div>

尝试一下让我知道它是如何工作的 - 希望这有帮助！