전체 너비 이미지 만들기

Question

화면의 너비를 늘리려면 이미지 가장자리가 좋을 것입니다. 완전한 배경이되기를 기대하지 않습니다.

내 웹 사이트입니다

<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를 www.jobspark.ca

.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

무엇 당신의 CSS 규칙에

width: 100%; 

를 추가하고 여백을 제거하기에 대한? like this

귀하의 질문입니까?

Answer 2

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

변화 960 ~ 100 %

& 내가 일반적으로 내가 내 배경 이미지를 원하는 정확한 크기와 위치를 맞는 div 요소를 정의 이러한 목표를 달성하기 위해

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

Answer 3

제거 가득 따르다.

그런 다음 background-size : cover에 대해 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> 

이 그것을 밖으로 시도 그것이 어떻게 작동하는지 알려주세요 - 이것이 도움이되기를 바랍니다!