html - 创建全宽图像

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

将 960 像素更改为 100%

＆ 摆脱

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

几天来我一直在与这个问题作斗争，很高兴能弄清楚一些事情。可能需要缩小才能看到问题。

Answer 1

怎么加

width: 100%;

符合您的 CSS 规则并消除边距？像这样

那是你的问题吗？

Answer 2

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

将 960 像素更改为 100%

＆ 摆脱

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

Answer 3

为了实现这个目标，我通常定义一个 div 元素，该元素适合我希望我的背景图像填充的确切大小和位置。

然后使用 css 属性作为 background-size:cover; 此 Cover 属性自动缩放图像以确保整个背景区域实际上被图像“覆盖”。 在此处查看文档

这是此方法工作示例的 jsfiddle

还值得注意的是，在居中的固定宽度区域之间实现间歇性全宽度区域，我喜欢使用这种定义与您的非常相似的 .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>

试试吧，让我知道它是如何工作的 - 希望这会有所帮助！