어떻게 중간 div 표시 왼쪽 및 오른쪽 배경 분할 달성하려면?

Question

나는 StackOverflow와 마찬가지로 브라우저의 너비를 100 % 늘리는 header-Container div가 있습니다. 이 div 안에는 페이지 중앙에 고정 너비가있는 실제 header이 있습니다.

원하는 것은 특정 배경색 만 헤더의 왼쪽에만 적용하고 다른 색상은 헤더의 오른쪽에 적용하는 것입니다. 나는 본질적으로 header-Container div에 분할 배경 색 구성표를 만들려고합니다. 여기

내가 그 순간에 나는 곳의 JSFiddle입니다 http://jsfiddle.net/1orddfn7/

HTML :

<div id="header-Container"> 
    <div id="header"> 
    </div> 
</div> 

CSS : 나는이 개 배경 색상을 적용하고 그들을 분할 할 수

#header-Container { background-color: #CCC; position: relative; height: 190px;} 
#header { background-color: red; width: 400px; height: 190px; margin-right: auto; margin-left: auto; } 

헤더 컨테이너 div의 50 % 표시 (가능하면 최대 브라우저 호환성을 원합니다). 그래서 나는 header-bg-left과 header-bg-right과 같은 두 개의 추가 div를 만들고 메인 센터 header div의 왼쪽과 오른쪽으로 각각 떠올리게 할 필요가 있다고 생각했습니다. 그러나 나머지 부분을 브라우저 창 가장자리까지 채우는 방법을 모르지만 header div의 가장자리에서 멈 춥니 다. 이 작업을 수행하는 더 좋은 방법이 있습니까?

Answer 1

한 가지 방법은 당신이 http://jsfiddle.net/1orddfn7/2/

---

에서 데모

#header-Container:before, 
#header-Container:after{ 
    content:''; 
    position:absolute; 
    z-index:-1; 
    width:50%; 
    top:0; 
    bottom:0; 
} 
#header-Container:before{left:0;background-color:yellow;} 
#header-Container:after{right:0;background-color:green;} 

를 원하는 색상을 가진 요소를 만들 수 :after 및 :before를 사용하는 또 다른 두 가지 색상으로 그라데이션 배경을 사용하는 것입니다.

#header-Container { position: relative; height: 190px; 
    background: -moz-linear-gradient(left, #eaf700 0%, #eaf700 50%, #0fe500 50%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eaf700), color-stop(50%,#eaf700), color-stop(50%,#0fe500)); 
    background: -webkit-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%); 
    background: -o-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%); 
    background: -ms-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%); 
    background: linear-gradient(to right, #eaf700 0%,#eaf700 50%,#0fe500 50%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaf700', endColorstr='#0fe500',GradientType=1); 
} 

http://jsfiddle.net/1orddfn7/3/

(http://www.colorzilla.com/gradient-editor/에서 그라데이션 CSS)