flere billede baggrunde i CSS

På nuværende tidspunkt er det ikke muligt at have flere baggrundsbilleder på samme element, i alle de populære browsere.

men du kan gøre følgende:

<div style="background: url(image1.jpg) center center; height: 200px; width: 200px;">
    <div style="background: url(image2.jpg) left top; width: 100%; height: 100%;">
        <div style="background: url(image3.jpg) right bottom; width: 100%; height: 100%;">
        </div>
    </div>
</div>

Teknikken er at du laver nogle divs der hver indeholdet en af de bagrunde du vil bruge. Du kan placere dem med normal position, og for at de ikke skal være i vejen for andet indhold på din side giver du dem z-index -1. Et eksempel hvor du ville placere 4 forskellige baggrundbilleder, i hver sit hjørne af skærmen kunne se sådan ud:

#bg1 {
background:url(b1.png);
width:300px;
height:300px;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
#bg2 {
background:url(b2.png);
width:300px;
height:300px;
position:absolute;
top:0px;
right:0px;
z-index:-1;
}
#bg3 {
background:url(b3.png);
width:300px;
height:300px;
position:absolute;
bottom:0px;
left:0px;
z-index:-1;
}
#bg4 {
background:url(b4.png);
width:300px;
height:300px;
position:absolute;
bottom:0px;
right:0px;
z-index:-1;
}