[WORDPRESS] 트위터 부트 스트랩의 컨테이너 내부에 100 % 너비 배경을 갖는 방법?

트위터 부트 스트랩의 컨테이너 내부에 100 % 너비 배경을 갖는 방법?

해결법

1. ---

   1.CSS 트릭 (전체 너비 브라우저 바) 에서이 기사를 기반으로합니다.

   CSS 트릭 (전체 너비 브라우저 바) 에서이 기사를 기반으로합니다.

   HTML.

   <div class="container">
     <div class="level"></div>
     <div class="level purple"></div>
     <div class="level"></div>
   </div>
   

   CSS.

   html, body {
       overflow-x: hidden;
   }
   .container {
     width:960px;
     margin: 0  auto;
     border:1px solid black;
   }
   .level {
     height:100px;
     background: #bada55;
   }
   
   .purple {
     position: relative;
     background: #663399;
   }
   
   .purple:before, 
   .purple:after {
     content: "";
     position: absolute;
     background: #663399;  /* Match the background */
     top: 0;
     bottom: 0;
     width: 9999px;   /* some huge width */
   } 
   .purple:before {
     right: 100%; 
   }
   .purple:after {
     left: 100%;
   }
   

   Codepen Demo.

   지원은 IE8 & up이어야합니다

from https://stackoverflow.com/questions/24344261/how-to-have-a-100-width-background-inside-container-of-twitter-bootstrap by cc-by-sa and MIT license