Can I apply multiple background colors with CSS3?

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?

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(http://lorempixel.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;
}

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

Can I apply multiple background colors with CSS3?

Related

Recent Posts