How to Apply Multiple Background Colors With Css3

Can I apply multiple background colors with CSS3?

You can’t really — background colours apply to the entirely of element backgrounds. Keeps ’em simple.

You could define a CSS gradient with sharp colour boundaries for the background instead, e.g.

background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);

But only a few browsers support that at the moment. See http://jsfiddle.net/UES6U/2/

(See also http://www.webkit.org/blog/1424/css3-gradients/ for an explanation CSS3 gradients, including the sharp colour boundary trick.)

Multiple background colors with css only

You can achieve this with gradients. You just need to blend from a colour to the same colour, and then blend to the next colour across zero pixels and so on.

.Neapolitan {  height: 200px;  width: 200px;  background: linear-gradient(to bottom, red 0%, red 33%, green 33%, green 66%, blue 66%, blue 100%);}

<div class="Neapolitan">
</div>

Multiple background-color layers

Without understanding why you want this, it can be done by using solid color gradients: fiddle.

body {
    background: linear-gradient(rgba(220,14,120,0.5), rgba(220,14,120,0.5)),
                linear-gradient(white, white); /* first bg is on top of this */

}

How can apply multiple background color to one div

The A div can actually be made without :before or :after selector but using linear gradient as your first try. The only difference is that you must specify 4 positions. Dark grey from 0 to 50% and ligth grey from 50% to 100% like this:

background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);

As you know, B div is made from a linear gradient having 2 positions like this:

background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%);

For the C div, i use the same kind of gradient as div A ike this:

background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);

But this time i used the :after selector with a white background like if the second part of your div was smaller. * Please note that I added a better alternative below.

Check this jsfiddle or the snippet below for complete cross-browser code.

div{    position:relative;    width:80%;    height:100px;    color:red;    text-align:center;    line-height:100px;    margin-bottom:10px;}
.a{    background: #9c9e9f; /* Old browsers */    background: -moz-linear-gradient(left,  #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* FF3.6+ */    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#f6f6f6), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */    background: -o-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Opera 11.10+ */    background: -ms-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* IE10+ */    background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* W3C */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */}
.b{    background: #9c9e9f; /* Old browsers */    background: -moz-linear-gradient(left,  #9c9e9f 0%, #f6f6f6 100%); /* FF3.6+ */    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */    background: -o-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* Opera 11.10+ */    background: -ms-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* IE10+ */    background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%); /* W3C */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */}
.c{        background: #9c9e9f; /* Old browsers */    background: -moz-linear-gradient(left,  #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); /* FF3.6+ */    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#33ccff), color-stop(100%,#33ccff)); /* Chrome,Safari4+ */    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Chrome10+,Safari5.1+ */    background: -o-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Opera 11.10+ */    background: -ms-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* IE10+ */    background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* W3C */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#33ccff',GradientType=1 ); /* IE6-9 */}.c:after{    content:"";    position:absolute;    right:0;    bottom:0;    width:50%;    height:20%;    background-color:white;}

<div class="a">A</div><div class="b">B</div><div class="c">C</div>

CSS: Set a background color which is 50% of the width of the window

Older Browser Support

If older browser support is a must, so you can't go with multiple backgrounds or gradients, you're probably going to want to do something like this on a spare div element:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

Example: http://jsfiddle.net/PLfLW/1704/

The solution uses an extra fixed div that fills half the screen. Since it's fixed, it will remain in position even when your users scroll. You may have to fiddle with some z-indexes later, to make sure your other elements are above the background div, but it shouldn't be too complex.

If you have issues, just make sure the rest of your content has a z-index higher than the background element and you should be good to go.

Modern Browsers

If newer browsers are your only concern, there are a couple other methods you can use:

Linear Gradient:

This is definitely the easiest solution. You can use a linear-gradient in the background property of the body for a variety of effects.

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

This causes a hard cutoff at 50% for each color, so there isn't a "gradient" as the name implies. Try experimenting with the "50%" piece of the style to see the different effects you can achieve.

Example: http://jsfiddle.net/v14m59pq/2/

Multiple Backgrounds with background-size:

You can apply a background color to the html element, and then apply a background-image to the body element and use the background-size property to set it to 50% of the page width. This results in a similar effect, though would really only be used over gradients if you happen to be using an image or two.

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

Example: http://jsfiddle.net/6vhshyxg/2/

EXTRA NOTE: Notice that both the html and body elements are set to height: 100% in the latter examples. This is to make sure that even if your content is smaller than the page, the background will be at least the height of the user's viewport. Without the explicit height, the background effect will only go down as far as your page content. It's also just a good practice in general.

CSS to add multiple color background colors horizontally with hard stops

You have to list each color twice in the linear background, like "from 0% to 20%", then "from 20% to 40%" etc., and the percentage values always mean the percentage of the whole distance, so it's:

background: linear-gradient(to right, #946f20 0%, #946f20 20%, #041b2c 20%, #041b2c 40%, #00adf2 40%, #00adf2 60%, #30bc9d 60%, #30bc9d 80%, #7f469f 80%, #7f469f 100%);

Here's the result: http://codepen.io/anon/pen/BWNbQG

Is it possible to have two background colors for a single html element?

Simply use linear-gradient as background and you can easily adjust the direction, colors, % of each color:

body {  margin: 0;  background: linear-gradient(to right, red 50%, blue 0%);    height:100vh;  text-align:center;  color:#fff;}

some content

Fall-back color with multiple backgrounds css background property

So with Sam_'s help, I figured out that you can only have background-color specified on the second image, like this:

#my-element {  background: url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed, #000000 url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;  color: #ff00ee;}

<!DOCTYPE html><html><head></head><body id="my-element">  <div>    <h1>Lorem Ipsum Dolor</h1>    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis    tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl     ut aliquip ex ea commodo consequat.</p>  </div></body></html>

Multiple vertical background colors in CSS3

You could use linear-gradients to achieve this.

Example Here

html, body {
    height: 100%;
}
body {
    background-image: linear-gradient(90deg,
        #F6D6A8 20%,
        #F5BA55 20%, #F5BA55 40%,
        #F09741 40%, #F09741 60%,
        #327AB2 60%, #327AB2 80%,
        #3A94F6 80%);
}

Just add vendor prefixes for additional browser support

body {
    background: -moz-linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%);
    background: -webkit-linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%);
    background: linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%);
}

Browser support can be found here.