Votre question

Image bg 100% + image au dessus

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
23 Avril 2009 16: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

23 Avril 2009 22: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

  1. #arriere , html , body {
  2. margin:0;
  3. padding:0;
  4. height : 100%;
  5. width : 100%;
  6. }
  7. #arriere img.etirable {
  8. /* l'image occupe toute la place de son bloc conteneur */
  9. width : 100%;
  10. height: 100%;
  11. position: absolute;
  12. top:0;
  13. left:0;
  14. z-index:1;
  15. }
  16. #arriere p {
  17. position: relative;z-index:2; /* placement du texte par-dessus l'image */
  18. }




reprise de ton html

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


Le principe qui t'interesse est d'apprendre a te servir des selecteurs CSS , (pour en savoir plus , moteur de recherche :)  ) L'exemple a l'arrache est pour test ....

GC
m
0
l
24 Avril 2009 14:23:05

Merci de ta réponse, je t'ai envoyé un message privé peux le regarder et m y repondre pour me dire s il te plait.

MERCI bcp
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS