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  lt div gt   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  lt div gt s

User · Answer

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

_x000D_

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

_x000D_

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

_x000D_

User · Answer

In case someone needs a CSS background with different color repeating horizontal stripes  here is how I managed to achieve this    x000D   x000D  body   x000D    font-family   Lucida Grande    Helvetica Neue   Helvetica  Arial  sans-serif  x000D    font-size  13px  x000D    x000D   x000D   css-stripes   x000D    margin  0 auto  x000D    width  200px  x000D    padding  100px  x000D    text-align  center  x000D       For browsers that do not support gradients    x000D    background-color   F691FF  x000D       Safari 5 1 to 6 0    x000D    background  -webkit-repeating-linear-gradient  F691FF   EC72A8   x000D       Opera 11 1 to 12 0    x000D    background  -o-repeating-linear-gradient  F691FF   EC72A8   x000D       Firefox 3 6 to 15    x000D    background  -moz-repeating-linear-gradient  F691FF   EC72A8   x000D       Standard syntax    x000D    background-image  repeating-linear-gradient to top   F691FF   EC72A8   x000D    background-size  1px 2px  x000D    x000D   lt div class  css-stripes  gt Hello World  lt  div gt  x000D   x000D   x000D    JSfiddle

User · Answer

You can only use one color but as many images as you want  here is the format   background     lt bg-layer gt        lt final-bg-layer gt     lt bg-layer gt     lt bg-image gt      lt bg-position gt       lt bg-size gt         lt repeat-style gt      lt attachment gt      lt box gt  1 2    lt final-bg-layer gt     lt bg-image gt      lt bg-position gt       lt bg-size gt         lt repeat-style gt      lt attachment gt      lt box gt  1 2      lt background-color gt   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

User · Answer

Yes its possible  and you can use as many colors and images as you desire  here is the right way    x000D   x000D  body  x000D     Its  very important to set the background repeat to  no-repeat    x000D  background-repeat no-repeat   x000D   x000D  background-image    x000D     1  An image                 url http   lorempixel com 640 100 nature John3-16     x000D     2  Gradient                 linear-gradient to right  RGB 0  0  0   RGB 255  255  255     x000D     3  Color using gradient     linear-gradient to right  RGB 110  175  233   RGB 110  175  233    x000D   x000D  background-position  x000D     1  Image position           0 0   x000D     2  Gradient position        0 100px  x000D     3  Color position           0 130px  x000D   x000D  background-size    x000D     1  Image size               640px 100px  x000D     2  Gradient size            100  30px   x000D     3  Color size               100  30px  x000D    x000D   x000D   x000D

User · Answer

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

User · Answer

In this LIVE DEMO i ve achieved this by using the  before css selector which seems to work quite nicely      x000D   x000D   myDiv    x000D  position  relative    Parent MUST be relative   x000D  z-index  9  x000D  background  green  x000D       x000D    Set width height of the div in  parent        x000D  width 100px  x000D  height 100px  x000D    x000D   x000D   x000D   myDiv before   x000D  content      x000D  position  absolute   set  child  to be absolute   x000D  z-index  -1    Make this lower so text appears in front   x000D      x000D       x000D    You can choose to align it left  right  top or bottom here   x000D  top  0   x000D  right 0  x000D  bottom  60   x000D  left  0  x000D       x000D       x000D  background  red  x000D    x000D   lt div class  myDiv  gt this is my div with multiple colours  It work s with text too  lt  div gt  x000D   x000D   x000D    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

[css] Can I apply multiple background colors with CSS3?

Examples related to css