4

I need to attach multiple backgrounds to an element via CSS and I can't use :before/:after.

I'm wondering what the correct syntax to use multiple CSS background image is.

There is a bunch of suggested ways I found, like here or here, but I can get neither of these:

background: url(…) 0 0 repeat, url(…) 5px 5px no-repeat #FFF;
background: url(…) 600px 10px no-repeat, url(…) 10px 10px no-repeat;

to work.

This is what I currently have:

background-image: rgba(0, 0, 0, 0.4) url("img/icons-18-white.png") no-repeat 0% 50%,linear-gradient( #9ad945, #7eb238 );

which is ignored. Only when I supply the pure url, it works:

background-image: url("img/icons-18-white.png") , linear-gradient( #9ad945, #7eb238 );

Question:
I'm specifically looking for a way to set background-size/position/repeat per image, so if someone could point me to the correct syntax, would be really nice!

EDIT: Adding scroll and replacing background-image with background

background: rgba(0, 0, 0, 0.4) url("http://code.jquery.com/mobile/1.3.0/images/icons-18-white.png") no-repeat scroll 0% 50%, linear-gradient( #9ad945, #7eb238 );

does not work.

frequent
  • 27,643
  • 59
  • 181
  • 333

1 Answers1

7

There are two main issues with what you have that prevent it from working:

  • The shorthand property is background, not background-image.

  • The background color, which in your case is rgba(0, 0, 0, 0.4), must be specified last.

If the shorthand syntax ends up too confusing, you can always set the individual properties separately, passing them the same number of comma-separated values corresponding to the number of background layers (CSS gradients are considered to be images). However if you set background-color you may only specify it once.

Remember that when specifying multiple backgrounds, the order in which they are drawn is first to last, top to bottom. This is why the color is expected to come last in a shorthand declaration. This section of the spec describes it, while this section contains the full syntax:

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

Where

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

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

Details about layering in individual properties can be found in their respective sections.

If you're trying to superimpose the background graphic over an rgba() color, you may not be able to add a gradient beneath that layer without applying the gradient to a :before box instead. Alternatively, if you mix the 40% black color into the gradient stops themselves, you can remove the rgba() color altogether leaving just the graphic and the gradient.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    He needs short hand for multiple backgrounds..so instead of `background: 1, 2; background-repeat: no-repeat, repeat;` he needs `background: 1, 2, no-repeat, repeat;` – Mr. Alien Apr 02 '13 at 14:27
  • 2
    +1 Nice answer .. Also take a look at [3.1. Layering Multiple Background Images](http://www.w3.org/TR/css3-background/#layering) for more info – Adrift Apr 02 '13 at 14:28
  • @Mr.Alien: so I can't set no-repeat, repeat "per background" – frequent Apr 02 '13 at 14:32
  • @Adrift: now I really learned something! Thanks for the link! – frequent Apr 02 '13 at 14:33
  • 1
    @Adrift: Editing my answer to include the relevant links. – BoltClock Apr 02 '13 at 14:33
  • @frequent You need to set it differently, `background-repeat: no-repeat, repeat` means `no-repeat` for background 1 and `repeat` for background 2, separate it by commas, but NO you cannot have a long string of multiple short hand declarations – Mr. Alien Apr 02 '13 at 14:33
  • @Mr.Alien: just found that out, too. But it works with separate declarations. – frequent Apr 02 '13 at 14:37
  • @BoltClock: do you want to add an example of how to set it up with separate declarations and that `background-image: 1,2 need background-repeat: no-repeat, no-repeat`. That would help anyone else stumbling across this. – frequent Apr 02 '13 at 14:38
  • @frequent Ya it will and that's the way to declare multiple backgrounds :) – Mr. Alien Apr 02 '13 at 14:40