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;
}

• Barnee: Try deleting the , after #FF0
• Barnee: possible duplicate of Multiple background-images and a background-color

Answer 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

• BoltClock: 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.

Answer 2

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
 }