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 to change SVG color (when using the SVG as background in CSS)

    How to put things in divs with true border

    How to add second level to a submenu in a dropdown navigation css

    How to create rounded shapes with css or SVG

    How can I toggle between multiple .css with jquery?

    How can I expand this picture to cover the width of my page?

    C# How to base64 encode background gradient

    How to remove Firefox's button outline when mouse press, not click, hover or forcus

    How to navigate from one field to another field using Enter Key function in MVC5

    how to fire a jquery child function at the start of parent animation

    xHTML/CSS: How to make inner div get 100% width - margins

    How to use text-overflow properly to format text?

    How to read different CSS classes with the same beginning with jquery?

    how to number questions using class in CSS

    How to transform to <%= link_to %> with css?

    In order to output in erb exactly what you have in your original html, you could use the following: <li> <%= link_to user_path do %> <span>User</span> <% end %> </li>...
    Read more

    How do I display an empty div tag with CSS?

    How can I center a figure with caption?

    How can I make my form take only a limited space?

    How does google elegantizr work?

    How to use bootstrap css tables to display data from MySQL tables?

    How to style a table-like div with css? How to fill a “column”?

    How to make round corners to both inside of a box and its border?

    How to select children in CSS

    How to change checkbox's border style in CSS?

    How to center a rotated div inside a table element with a specific width?

    How to put CSS and HTML in one page of code? [duplicate]

    How can I change the color of my body when using Bootstrap?

    How to find which CSS files are used for current page

    How to disable select box hover color on css

    Messed up slides in custom minimal JS/CSS slideshow