Reputation: 149
I have one picture that is 50px width and 340px height. The picture should be repeat to the left side, but not down. Then i have a streak with this picture in the top of my page. And the rest of the page(down) should be an other picture.
Here is my statement:
background: url("images/bg.png") repeat-x scroll left top #2C9E2E;
But now i want to change the last piece #2C9E2
to url("images/bg-body.gif")
, but it wont work.
I tried this code:
body{
background: url("images/bg.png") repeat-x scroll left top url("images/bg-body.gif");
}
Upvotes: 0
Views: 65
Reputation: 3494
background
is shorthand for multiple declarations, and the url("images/bg.png")
and #2C9E2E
pieces specify background-image
and background-color
, respectively.
To display multiple, layered, backgrounds you need to separate multiple declarations with a comma (background: <top background>, <bottom background>
). Also, the color declaration can only appear on the last background layer.
So, if you want bg.png to appear on top of bg-body.png with a flat colour behind both, you would use:
background: url("images/bg.png") repeat-x scroll left top, url("images/bg-body.gif") #2C9E2E;
Add additional properties to the second background as needed (e.g. repeat/scroll/position), and remove the color value if you don't want it behind both of your images.
Also note that multiple backgrounds are not supported by IE8 (http://caniuse.com/#feat=multibackgrounds). If you need to support IE8 or older, you will need to specify a single background fallback.
background: url("images/bg.png") repeat-x scroll left top #2C9E2E;
background: url("images/bg.png") repeat-x scroll left top, url("images/bg-body.gif") #2C9E2E;
Upvotes: 3