fill div with 2 colors?

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 :

开发者_StackOverflow社区

---

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.

---

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>

---

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

---

No, you can only set one background-color. However, you could split your container into two and set a different backgorund-color for each one.

---

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 the :before css attribute allows you to 'fill' a div with the two colours.

.myDiv {
  position: relative;  /*Parent MUST be relative*/
  z-index: 9;
  background: green;
  
  /*Set width/height of the div in 'parent'*/
  width: 100px;
  height: 100px;
}
.myDiv:before {
  content: "";
  position: absolute; /*set 'child' to be absolute*/
  z-index: -1;  /*Make this lower so text appears in front*/
  
  
  
  /*You can choose to align it left, right, top or bottom here*/
  top: 0;
  right: 0;
  bottom: 60%;
  left: 0;
  background: red;
}

<div class="myDiv">this is my div with multiple colours. It work's with text too!</div>

An easily edited sample can be seen LIVE DEMO

---

You can use linear-gradient background to do this

     background: linear-gradient(90deg, green 50%,red 50%);

---

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 */
}

---

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

---

You could you inset box shadow, and change the shadow to whatever colour you required.

CSS

-moz-box-shadow:    inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
-webkit-box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
box-shadow:         inset 50px 0px 0px 0px rgba(156, 244, 255, 1);