Создание изображения полной ширины

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 для фона: обложка; этот атрибут 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> 

попробовать его дайте мне знать, как это работает - надеюсь, что это поможет!