Image bg 100% + image au dessus

Dernière réponse : 24 Avril 2009 12:23 dans Programmation

krivos

23 Avril 2009 14:52:07

bonjour,
J'ai utiliser un css pour pour pouvoir mettre une image en background qui s'adapte a tous les écrans, afin d'avoir une photo en bg et du texte par dessus, mais maintenant je n'arrive plus a mettre des images sur ma page.

voici le css que j'ai utilisé

#arriere {
left: 10em;
top: 0em;
height : 100%;
width : 100%;
}
#arriere img {
/* l'image occupe toute la place de son bloc conteneur */
width : 100%;
height: 100%;
}
#arriere p {
position: absolute; /* placement du texte par-dessus l'image */
top: 0px;

}

et voici ce que je rentre dans le html

<div id="arriere">
<img alt="" src="image.png />
<p>titre sur une image en arrière-plan étirée <br />
Modifiez la taille du texte avec votre navigateur: l'image suit la cadence!</p>
</div>

Comment faire pour qu'avec ce systeme je puisse mettre des images par dessus ? y' a t'il un autre systeme ?

MERCI

Autres pages sur : image 100 image

| Etre averti des réponses
| Alerter

Répondre à krivos

Lassé par la pub ? Créez un compte

gccyrillus

23 Avril 2009 20:31:55

bonjour,

pour cibler une seule image , tu peut par exemple te servir d'une class :

reprise de ton css pour une page complete

#arriere , html , body {
margin:0;
padding:0;
height : 100%;
width : 100%;
}
#arriere img.etirable {
/* l'image occupe toute la place de son bloc conteneur */
width : 100%;
height: 100%;
position: absolute;
top:0;
left:0;
z-index:1;
}
#arriere p {
position: relative;z-index:2; /* placement du texte par-dessus l'image */
}

reprise de ton html

<div id="arriere">
<img  src="image.png" alt="" class="etirable" />
<h1>titre</h1>
<p> sur une image simulant un arriere plan etirable .</p>
<p> image dans le flux normal:<img  src="autre_image.png" alt="image au comportement classique"  /></p>
</div>

Le principe qui t'interesse est d'apprendre a te servir des selecteurs CSS , (pour en savoir plus , moteur de recherche