그리드를 사용할 때 전체 너비로 배경 이미지를 확장하려면 어떻게해야합니까?

래퍼 요소의 배경 이미지를 그리드 너머로 확장하여 응답을 유지할 수 있습니까?그리드를 사용할 때 전체 너비로 배경 이미지를 확장하려면 어떻게해야합니까?

박스 쉐도우 기법을 사용하여 단색으로 할 수는 있지만 그리드를 벗어나는 배경 이미지를 얻을 수 없었습니다.

최대 너비가 1140 픽셀이고 열이 떠있는 12 열의 유연한 비율 기반 표를 사용하고 있습니다. 랩핑 요소의 배경 이미지 설정은 요소에 절대 너비 (예 : 150 %)를 지정하지 않으면 응답이 1140px로 끝나기 때문에 어쨌든 나쁜 연습입니다.

내 레이아웃이

<body> 
    <container> 
     <header></header> 
     <inner-content> 
      <grid-element-one></div> 
      <bg-wrap> 
       <grid-element-two></div> 
      </div> 
      <grid-element-three></div> 
     </inner-content> 
     <footer></footer> 
    </container> 
</body>

같은 간단하고 나는 배경 이미지가 필요 요소가 다른 그리드 화 섹션 사이에있는 곳이 배치합니다. 따라서 바닥 글이나 무언가 위에 놓고 영향을 받기 전에 그리드를 끝낼 수는 없습니다.

CSS는 베어 본 (bare bones)입니다.

.inner-content { 
    max-width: 1140px; /* when 768px+, otherwise 96% */ 
} 
.element-two { 
    color: $font-color; 
    background-color: $bg-gray; 
    box-shadow: -25rem 0 0 $bg-gray, 25rem 0 0 $bg-gray; 
    height: 475px; 
} 
.bg-wrap { 
    background: url(../images/bg/texture.png) 0 80px repeat;    
}

출처

2013-10-28 Jackie

내가 좋아하는, 의사 요소를 생각하는 데 도움이됩니다. – Jackie

정확히 원하는 것을보기 위해 바이올린을 만들 수 있습니까? – ajc

@ajc - 여기가 수수께끼입니다. http://jsfiddle.net/mPGQQ/ – Jackie

이게 원하는가요? http://jsfiddle.net/mPGQQ/7/

그렇다면 div class="inner-content" 끝 부분을 끝까지 이동하고의 CSS를 피들과 같이 수정해야합니다. 그것을 할 수 있습니다 전에,하지만 난 그들을 사용하여 제한된 경험을 가지고 그것을 작성하는 방법을 잘 모르겠습니다했습니다

희망이

건배

출처

2013-10-28 08:34:07 phron

정확하게는 아닙니다. 배경을 한 div에 적용하기 만하면됩니다. 이와 같이, 그러나 그것이 파란색 인 경우, bg 이미지를 사용할 수 있기를 원합니다. http://jsfiddle.net/jackiesc/mPGQQ/8/ – Jackie

또한 모든 것이 동일한 그리드에 있기 때문에, 내부 콘텐츠 div 주위에 모든 것들을 비뚤어지게 만들지 않고. – Jackie

좋아요, 이건 당신의 필요에 충분히 맞나요? http://jsfiddle.net/mPGQQ/35/? 당신은 백분율 또는 크기로 놀아달라고 할지도 모르지만 나는 그것이 당신이 예상하는 결과의 꽤 가깝다는 것을 생각한다. – phron

그리드를 사용할 때 전체 너비로 배경 이미지를 확장하려면 어떻게해야합니까?

답변

관련 문제