CSS - image de fond multiple

Question

Hey. Je veux mettre plusieurs image d'arrière-plan dans css à une position différente (comme à diff px et à diff z-index.) Est-ce possible dans l'étiquette du corps. Je veux dire toutes les images dans l'étiquette du corps. ou avec des identifiants de diff.?

body {background-image:url(img/banner.png); 
    background-position: 50% 49px; 
    background-repeat:no-repeat; 
    background-color:#000000} 

.nav {position:absolute; 
top:267px; 
left:149px; 
z-index:1} 

.home {position:absolute; 
    top:281px; 
    left:285px; 
    z-index:2;} 

.event {position:absolute; 
    top:281px; 
    left:389px; 
    z-index:2;} 

.sponsors{position:absolute; 
    top:281px; 
    left:493px; 
    z-index:2;} 

.about {position:absolute; 
    top:281px; 
    left:597px; 
    z-index:2;} 

.register{position:absolute; 
    top:281px; 
    left:701px; 
    z-index:2;} 

.more {position:absolute; 
    top:281px; 
    left:805px; 
    z-index:2;} 

.box {position:absolute; 
    top:1163px; 
    left:157px; 
    z-index:1;} 

et pour chaque classe je veux ajouter une image de fond. veuillez corriger le code. et ajoutez une image d'arrière-plan dans toutes les classes ci-dessus

Answer 1

En CSS 3, vous pouvez utiliser plusieurs arrière-plans. Mais il n'est pas encore largement supporté. Comme

background: url(body-top.gif) top left no-repeat, 
      url(banner_fresco.jpg) top 11px no-repeat, 
      url(body-bottom.gif) bottom left no-repeat, 
      url(body-middle.gif) left repeat-y; 

Voir multiple backgrounds

Vous pouvez utiliser différents conteneurs (div) et définir les images de fond pour eux.

Answer 2

body {background-image:url(img/banner.png); 
    background-position: 50% 49px; 
    background-repeat:no-repeat; 
    background-color:#000000} 

.nav {background-image:url(img/button.gif); 
position:absolute; 
top:267px; 
left:149px; 
z-index:1} 
.home {background-image:url(img/button.gif);position:absolute; 
    top:281px; 
    left:285px; 
    z-index:2;} 

.event {background-image:url(img/button.gif);position:absolute; 
    top:281px; 
    left:389px; 
    z-index:2;} 

.sponsors{background-image:url(img/button.gif);position:absolute; 
    top:281px; 
    left:493px; 
    z-index:2;} 

.about {background-image:url(img/button.gif);position:absolute; 
    top:281px; 
    left:597px; 
    z-index:2;} 

.register{background-image:url(img/button.gif);position:absolute; 
    top:281px; 
    left:701px; 
    z-index:2;} 

.more {background-image:url(img/button.gif);position:absolute; 
    top:281px; 
    left:805px; 
    z-index:2;} 

.box {background-image:url(img/button.gif);position:absolute; 
    top:1163px; 
    left:157px; 
    z-index:1;} 

ne reçois pas it..please corriger cette

Answer 3

vous ne pouvez pas il n'y a pas de largeur et hauteur par défaut.

Seulement si l'image est dans la div. <div> <img src='image.jpg'> </div> le div prend la taille de l'image. Mais même alors, je ne suis pas sûr que cela arrivera aux divs absolus.

Utilisez comme rahul suggéré css3 ou donner les divs (comme je l'ai déjà dit) une largeur et une hauteur.