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

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

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

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

_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

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   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   lt div id  composition  gt  x000D   lt  div gt  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

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

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