CODEWITHSUNDEEP
cssbackground-image
user1584751
user1584751

Reputation:

CSS3 Multiple Background-Image Not working

I have two background images that i would like to place on the left and right side of my wrapper div. I am using CSS3 background-image property to do this but it is not working. Can anyone make sense as to why this is not working in any browsers. I would also like to know once i get this working on modern browsers will it work on older browser like IE 7?

Here is a visual of what i'm trying to accomplish i've have the navigation (green banner) already in place so i need to put the tricky red banner on and circle background.

I thought slicing the edges of the red banner along with the circle background and applying the code below would work but it does not being that I need the sides to stay flush to the sides.

enter image description here

body{ 
    background-color:#e5e5e5; 
    background-image: url("../img/background_left.png"),url("../img/background_right.png");
    background-position: right top, left top; 
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    }

Upvotes: 1

Views: 1348

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47667

Add height to your <body> and it will work - DEMO

html, body {
    height: 100%;
}

body{ 
    background-attachment: fixed, fixed;
    background-color:      #e5e5e5; 
    background-image:      url(http://lorempixel.com/300/200), url(http://lorempixel.com/200/300);
    background-position:   right top, left top; 
    background-repeat:     no-repeat, no-repeat;
} ​

But it won't work in older IE-s - multiple backgrounds support

Upvotes: 1

Related Questions