specification - w3 org html5 2




fill div with 2 colors? (6)

Better late then never. Thought this might help:

The htmls

<div id="content"> 
    <div id="left"></div>
    <div id="right"></div>
</div>

The csss

#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }

You can view this @ http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout

given a div that is 500px wide, is there a way to fill the background with 2 different colors using css? I know it can be done with a background image, but just wondering if it can be done with bg color. eg :


I ended up with this solution using linear gradients:

    .dualcol-test {
        background: linear-gradient(to right, green 0%, green 80%, red 80%, red 100%);
    }
   <div class="dualcol-test"> This div has a green and red background <br><br><br> </div>


This question got me thinking about how CSS3 would approach this problem.. and frankly the specification has me confused. That said, a couple of features that are creeping through the cracks: background-size and linear-gradient.

<style type="text/css">
    #ji { width: 500px; height: 300px;  
        background: 
        -moz-linear-gradient(green, green) 0px 0px no-repeat,
        -moz-linear-gradient(red, red) 200px 50px no-repeat,
        -moz-linear-gradient(blue, blue) 0px 250px no-repeat,
        -moz-linear-gradient(gray, gray) 300px 125px no-repeat;

        -moz-background-size: 450px 50px, 50px 200px, 250px 250px, 50px 250px;
    }
</style>
<div id="ji">

</div>

Give this a go :)

I'm sure there are better approaches to this problem, but it does demonstrate that we'll be afforded greater flexibility with CSS backgrounds (one day).

Edit: Forgot to mention that this will only work in Firefox, though there are Webkit equivalents for linear-gradient and background size


Using background-image / repeat-y is the easiest solution - however, maybe you want to change colours or widths or something with Javascript.

Here's a way to do this which allows text everywhere.

http://jsfiddle.net/WQ8CG/

HTML:

<div id="container"><div class="offset">text</div></div>

CSS:

#container {
    background: #ccc;
    border-right: 40px solid #aaa
}
.offset {
    margin-right: -40px;
    zoom: 1; /* to fix IE7 and IE6 */
    position: relative /* to fix IE6 */
}

You can achieve 2 colors in 1 div by using pseudo-element :before

HTML:

<div class="twocolordiv"></div>

CSS:

.twocolordiv  {
position: relative;
z-index: 9;
background: green;
width:500px;
height:100px;
}

.twocolordiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 20%;
bottom: 0;
left: 0;
background: red;
}

You can't set multiple background colors, but you could set something like:

div.twocolorish {
    background-color: green;
    border-left: 20px solid red;
}

As long as you don't need text to go over the part in red then this would take care of you in one div.





css