Multiple CSS backgrounds

Question

I have 3 background images and a colour that I want to put onto a mock up webpage however I can't get them to show at all, here is the css I am using:

body{
    #FF0,
    url(../Pictures/midal_foot_img_lg.png) bottom center no-repeat,
    url(../Pictures/banner.png) center no-repeat,
    background:url(../Pictures/header2.png) top center no-repeat;
}

possible duplicate of [Multiple background-images and a background-color](http://stackoverflow.com/questions/5427371/multiple-background-images-and-a-background-color) — Barnee, May 05 '14 at 09:32

score 1 · Accepted Answer · answered May 05 '14 at 09:31

1

I think your syntax isn't right, try this:

body {
    background: 
       url(../Pictures/midal_foot_img_lg.png) bottom center no-repeat,
       url(../Pictures/banner.png) center no-repeat,
       url(../Pictures/header2.png) top center no-repeat;
    background-color: #FF0;
}

Source

answered May 05 '14 at 09:31

Ex-iT

1,479
2
12
20

1

The background-color needs to come last or it'll be overridden. Either move the background-color declaration below, or put the `#FF0` at the very end of the background value. – BoltClock May 05 '14 at 09:32

score 0 · Answer 2 · answered May 05 '14 at 09:38

Css property name must go before value. In your case background. Also you may want to check out question Barnee pointed to.

   body{
       background:            
       url(../Pictures/midal_foot_img_lg.png) bottom center no-repeat,
       url(../Pictures/banner.png) center no-repeat,
       url(../Pictures/header2.png) top center no-repeat,
       #FF0
   }

Multiple CSS backgrounds

2 Answers2