Comment superposer des images en CSS

Question

J'ai besoin de savoir comment superposer une image de mon logo sur une autre image répétée qui est utilisée comme arrière-plan pour la barre de retenue en haut de mon site.

Le CSS pour l'image de la barre de Nag ressemble à ceci:

.header { 
background:url(../images/bg-header.jpg) repeat-x; 
height:125px; 

est-il un moyen d'ajouter une autre image au-dessus de cela et ont aligné sur le côté gauche de l'image sous-jacente?

Answer 1

Quelque chose comme ça?

http://jsfiddle.net/aJEwZ/

<style> 
.nav { 
    background: url(http://www.psdgraphics.com/file/light-wooden-background.jpg) repeat-x; 
    height: 250px; 
    width: 500px; 
    border:1px solid black; 
} 

img { 
    padding:20px; 
} 
</style> 

<div class='nav'> 
    <img src="http://a.deviantart.net/avatars/h/a/haz-elf.jpg?1" /> 
    hello</div> 

Answer 2

Ici vous allez.

est ici un DEMO

et est ici le CODE

Voici le css

.header { 
    background: url("http://fc04.deviantart.net/fs70/i/2013/266/7/3/sydneigh_logo_by_robberbutton-d6nmaox.png") top left no-repeat ,url("http://subtlepatterns.com/patterns/sandpaper.png") repeat-x; 
    background-size: 571px 125px, auto; 
    height:125px; 
    width: 100%; 
} 

Remarquez comment l'attribut de fond a deux arrière-plans raccourcies avec des images écrites sur séparées par une virgule. La première image est au-dessus de la deuxième image et ainsi de suite. La première propriété de l'attribut background-size ne s'applique qu'à la première propriété de l'attribut background (la première image de l'attribut d'arrière-plan déclaré). La deuxième s'applique à la deuxième image de l'attribut background.

Cela fonctionne de la même manière avec d'autres propriétés d'arrière-plan telles que la répétition d'arrière-plan et l'image d'arrière-plan.

est ici un article sur plusieurs ayant des images de fond:
http://www.css3.info/preview/multiple-backgrounds/