CODEWITHSUNDEEP
css
P.Henderson
P.Henderson

Reputation: 1091

CSS3 Multiple Background Vertically Aligned

With CSS3 you can use multiple background images.

Let's say I have a DIV container with dimensions: div {width:100px; height:200px;}.

I have 4 100/50px background images and I want to align these vertically so that the entire DIV is filled with these 4 backgrounds top to bottom.

Is this possible?

Upvotes: 1

Views: 1758

Answers (2)

Barbara Laird
Barbara Laird

Reputation: 12717

You can have multiple images in a background in css3 http://caniuse.com/#feat=multibackgrounds

http://jsfiddle.net/79TyM/

#container {
    width:200px;
    height:200px;
    background: 
       url(http://placekitten.com/100/100) left top no-repeat,  
       url(http://placekitten.com/g/100/100) right top no-repeat,   
       url(http://placekitten.com/g/100/100) left bottom no-repeat,     
       url(http://placekitten.com/100/100) right bottom no-repeat; 
}

OP wanted the backgrounds stacked, not in a square. Updated fiddle: http://jsfiddle.net/79TyM/1/

#container {
    width:100px;
    height:400px;
    background: 
       url(http://placekitten.com/100/100) left top no-repeat,  
       url(http://placekitten.com/g/100/100) left 100px no-repeat,   
       url(http://placekitten.com/g/100/100) left 200px no-repeat,     
       url(http://placekitten.com/100/100) left 300px no-repeat; 
}

Upvotes: 3

Callistino
Callistino

Reputation: 1085

Yes, it is possible using the background: url(...) property. A good explanation can be found here.

Basically this is the syntax:

...
background: 
    url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
    url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
    url(Paper-4.png);                      /* On bottom, like z-index: 1; */
...

Upvotes: 0

Related Questions