Mettre une div sur une image (comme un background)
MrHip7
Messages postés
31
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour tout le monde,
J'ai actuellement une image chargé dynamiquement (en php oui je sais :P) qui doit devenir le background d'une div. Je souhaiterai donc que cette image soit en entier, qu'elle ne deborde pas en dehors de la page et que le contenu de ma div soit visible par dessus cette image.
voici mon code actuel:
Bien entendu, le contenu de la div (en php) n'est pas important..
Je vous remerci d'avance pour les solutions que vous me proposerez!
Greg
J'ai actuellement une image chargé dynamiquement (en php oui je sais :P) qui doit devenir le background d'une div. Je souhaiterai donc que cette image soit en entier, qu'elle ne deborde pas en dehors de la page et que le contenu de ma div soit visible par dessus cette image.
voici mon code actuel:
<img src=<?php echo $QUESTIONBG;?> style="z-index=1; width: 100%; height: 100%; position:fixed position:absolute;" alt="background" />
<div style="position=absolute; z-index=2">
<img src=<?php echo $QUESTIONIMG;?>>
<h1 class="type2"><?php echo $QUESTIONQ;?></h1>
<?php
$lesrep = mysqli_query($base,"SELECT reponse FROM reponse WHERE question_id=".$QUESTIONID."") or exit(mysqli_error($base));
while($donnees = mysqli_fetch_array($lesrep))
{
$reponse = $donnees['reponse'];?>
<h3><?php echo $reponse;?></h3></br></br><?php
}
?>
</div>
Bien entendu, le contenu de la div (en php) n'est pas important..
Je vous remerci d'avance pour les solutions que vous me proposerez!
Greg
1 réponse
-
salut
soit tu fais un background en css a ton div, pour que l'img soit dynamique fait un css en php
sinon
met ton img dans un div en position relative
tu rajoute une div en position absolute avec un z-index supérieur à la div image le tout dans un div
ex<div> <div class="image"><img src="monimage.jpg" /></div> <div class="text">mon texte</div> </div>
css
.image { position:relative; z-index:1; } .text { position:absolute; z-index:10; }
evidement tu peux mettre des dimension a tes div et à .image img
