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 I join background images?

    How do I apply a CSS to a clutter stage?

    How to edit ol tags in rich text editor

    CSS - How to set gradient color background for different heights

    How to make a DIV section clickable?

    How to add a line break
    in
    in HTML

    How to find the relevant stylesheet for a specific CSS code [closed]

    How to hide a soft hyphen (­) in HTML / CSS

    How to vertically align label and input in Bootstrap 3?

    HTML/CSS How to make a menu closed and then use class=“active”

    how do i change image width in jCarousel?

    How to prevent inherit for H1?

    How do I change the placeholder like as the elements replace each other place?

    Dropdown list showing vertically in Internet explorer

    How do you ad stylesheets to JSDOM

    How to center an image, make it act as an link and have an mouseover command?

    How to change table cell colour to default on triple click html5/javascript/css

    Google chart - how to change a css property for the whole table

    How to Achieve Word Wrap Effect With Children Divs

    How to add missing browser-specific css declaration properties and prefixes to epub [closed]

    how to create css background effect in extjs4.0 application(on selection)

    How to make a photo collage using html and css? [closed]

    How do I alter my Jquery slideshow to change size in different screen resolutions

    HTML/CSS: How to get some text to align on right and other text on left on same line of table cell

    How to add new value to current css value [closed]

    How to fill a rectange from center html , css

    In IE6, how to float item to right without clearing it?

    how to exclude tags of certain types using LESS css

    How to fix inconsistent rendering of adjacent TD borders when they are collapsed?

    How to make CSS div width equal to browser width if element is inside wrapper element