Can I apply multiple background colors with CSS3?

Question

I know how to specify multiple background images using CSS3 and modify how they are displayed using different options.

Currently I have a <div>, which needs to have a different color for about 30% of the width on the left side:

div#content {
  background: url("./gray.png") repeat-y, white;
  background-size: 30%;
}

Instead of loading the image which is totally gray, how can I do this specifying the color, and without additional <div>s?

Scuta

Answer 1

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.)

Decortication

See this for a handy way to generate gradients, too. You can use "stops" to make a solid split instead of a gradient. Example – Calendar

@Thomas: sure, my example actually does a solid split too; I’ve edited my answer to make that clearer. Nice page from Microsoft there; I’d heard they were skipping CSS gradients in favour of SVG, so it’s nice to see it looks like they’ll support gradients in 10. – Decortication

I was too lazy to check if your example did solid splits or not :) - and yep, i'm glad they're doing CSS gradients as well. +1, btw. – Calendar

The current version (without the the -webkit- prefix): linear-gradient(to left, grey, grey 30%, white 30%, white); – Hebdomad

Answer 2

Yes its possible! and you can use as many colors and images as you desire, here is the right way:

body{
/* Its, very important to set the background repeat to: no-repeat */
background-repeat:no-repeat; 

background-image:  
/* 1) An image              */ url(https://placeimg.com/640/100/nature/John3-16), 
/* 2) Gradient              */ linear-gradient(to right, RGB(0, 0, 0), RGB(255, 255, 255)), 
/* 3) Color(using gradient) */ linear-gradient(to right, RGB(110, 175, 233), RGB(110, 175, 233));

background-position:
/* 1) Image position        */ 0 0, 
/* 2) Gradient position     */ 0 100px,
/* 3) Color position        */ 0 130px;

background-size:  
/* 1) Image size            */ 640px 100px,
/* 2) Gradient size         */ 100% 30px, 
/* 3) Color size            */ 100% 30px;
}

Homologous

Why isn't this the correct answer? Works perfectly! – Peipus

Love the ninja evangelism :) – Skaggs

Thanks for this! Late to the party, but very handy. – Kolosick

This answer is NOT precise. Using a gradient with 2 colors is completely different of trying to put 2 colors stacked! The only workaround for colors is actually using images! – Maiden

@Maiden you can make a "gradient" between two identical colors and it is the same as stacking semi-transparent solid colors. – Selfinductance

Answer 3

You can use as many colors and images as you desire.

Please note that the priority with which the background images are rendered is FILO, the first specified image is on the top layer, the last specified image is on the bottom layer (see the snippet).

#composition {
    width: 400px;
    height: 200px;
    background-image:
        linear-gradient(to right, #FF0000, #FF0000), /* gradient 1 as solid color */
        linear-gradient(to right, #00FF00, #00FF00), /* gradient 2 as solid color */
        linear-gradient(to right, #0000FF, #0000FF), /* gradient 3 as solid color */
        url('http://lorempixel.com/400/200/'); /* image */
    background-repeat: no-repeat; /* same as no-repeat, no-repeat, no-repeat */
    background-position:
        0 0, /* gradient 1 */
        20px 0, /* gradient 2 */
        40px 0, /* gradient 3 */
        0 0; /* image position */
    background-size:
        30px 30px,
        30px 30px,
        30px 30px,
        100% 100%;
}

<div id="composition">
</div>

Grappling

Thanks for FILO - that's what I was missing from other answers – Hinrichs

Answer 4

In this LIVE DEMO i've achieved this by using the :before css selector which seems to work quite nicely.

.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>

I thought i would add this as I feel it could work quite well for a percentage bar/visual level of something.

It also means you're not creating multiple divs if you don't have to, and keeps this page up-to-date

Titulary

Answer 5

You can only use one color but as many images as you want, here is the format:

background: [ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

or background: url(image1.png) center bottom no-repeat, url(image2.png) left top no-repeat;

If you need more colors, make an image of a solid color and use it. I know it’s not what you want to hear, but I hope it helps.

The format is from http://www.css3.info/preview/multiple-backgrounds/

Jaan

Nah, you can use a linear-gradient where the start and stop color are the same to simulate a solid color. You don't need an image. – Porcupine

Answer 6

In case someone needs a CSS background with different color repeating horizontal stripes, here is how I managed to achieve this:

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
}

.css-stripes {
  margin: 0 auto;
  width: 200px;
  padding: 100px;
  text-align: center;
  /* For browsers that do not support gradients */
  background-color: #F691FF;
  /* Safari 5.1 to 6.0 */
  background: -webkit-repeating-linear-gradient(#F691FF, #EC72A8);
  /* Opera 11.1 to 12.0 */
  background: -o-repeating-linear-gradient(#F691FF, #EC72A8);
  /* Firefox 3.6 to 15 */
  background: -moz-repeating-linear-gradient(#F691FF, #EC72A8);
  /* Standard syntax */
  background-image: repeating-linear-gradient(to top, #F691FF, #EC72A8);
  background-size: 1px 2px;
}

<div class="css-stripes">Hello World!</div>

JSfiddle

Phonsa