CODEWITHSUNDEEP
htmlcss
Skeptar
Skeptar

Reputation: 149

HTML background with 2 images

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

Answers (1)

gapple
gapple

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

Related Questions