Tom's Guide > Forum > Programmation > Image bg 100% + image au dessus

Image bg 100% + image au dessus

Forum Programmation : Image bg 100% + image au dessus

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
krivos   23-04-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

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
gccyrillus   23-04-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

Code :
  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

Code :
  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

------------------------------ etape par etape, observer prendre conseil et apprendre, se tromper, avancer ,etc...
 Répondre à gccyrillus
krivos   24-04-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

Répondre à krivos
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > Image bg 100% + image au dessus
Aller à :

Il y a 821 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,416 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens