How to achieve a left and right background split leaving middle div visible?


Tags: css

Problem :

I have a header-Container div which stretches 100% of the width of the browser, just like on StackOverflow. Within this div is the actual header with a fixed width which is centered on the page.

What I want is to have a particular background colour only applied to the left side of the header, and a different colour applied to the right side of the header. I'm essentially trying to create a split background colour scheme on the header-Container div.

Here is a JSFiddle of where I am at the moment 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; }

I can't apply two background colours and split them at the 50% mark on the header-container div (I'd like maximum browser compatibility if possible). So I was thinking that I need to create two additional divs such as header-bg-left and header-bg-right and float them left and right respectively of the main center header div. But then I don't understand how to make them fill the remaining space to the edge of the browser window but stop at the edge of the header div. Is there a better way to do this?



Solution :

One way is to use :after and :before to create elements with the color you want

#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;}

Demo at http://jsfiddle.net/1orddfn7/2/


Another is to use a gradient background with two colors.

#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 );
}

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

(gradient css from http://www.colorzilla.com/gradient-editor/)


    CSS Howto..

    How can a

    jQuery CSS how to avoid flickering?

    How to build a special polygon (a kite shape) with HTML & CSS only?

    How To Apply jQuery CSS Selector

    how to base a css rule on inherited value of dir attribute

    HTML and CSS: How to lay out a div tag with width:100% and left:300px

    How can I make my
    fit vertically into a parent div?

    How do I conclude the right directory path when including in CSS/JS/HTML?

    How does style elements such as “color” in CSS apply to elements like img?

    CSS : How to make two column right fluid left fluid depend on right

    python how to parse css file as key value [closed]

    How to make a File Sharing website [closed]

    How to position div underneath dynamic ul

    How to parameterize CSS selectors? [duplicate]

    How to make DIV constantly display text on click?

    CSS: How to select all rel atributes

    How to set margin left and right to the center div when using float:left

    How to change the scrolling text in CSS or JQuery

    how to creating a separator line which is always in the middle (center)

    CSS/CSS3 - How to make background-color in table row without spaces between table-cells?

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    How can the top DIV from two stacking DIVs affect the other's height

    How to set border-left for nav menu in css?

    How to recreate this image using css

    How can I make jQuery's draggable function expand the container?

    How to get 3 div's side by side under an angle

    How to make CSS column not be forced down

    How to copy only referenced .css to dest with gulp?

    Adobe Flex Show Content inside Rectangle (itemRenderer)

    css how to align a graphic on page