18041 sujets

Questions générales et questions de débutants

Comment insérer un texte sur un photo

Bonjour,
La page d'accueil de mon site sera une photo plein écran.
Je voudrais que le titre apparaisse sur cette photo, puis quand on fait défiler la page vers le bas, que l'ensemble photo et titre disparaissent vers le haut.
Tout simple quoi.

Donc voila mon code Html;
</head>
<body>
<img src="./photos/imagetitre.jpg" alt="origine univers">
<h1 class="rouge">Origine de l'univers</h1><br/ >
Sommaire....

Quand je fais ça, le titre reste sous la photo or je voudrais qu'il apparaisse dans la photo.
J'ai essayé d'insérer le titre directement sur la photo, mais l'effet final n'est pas très joli et surtout c'est un peu galère si je veux changer le titre.

Merci pour votre aide.
La mauvaise solution : mettre le tout dans une div en position relative et positionner les éléments enfants (h1 et img) en absolute.
Une solution plus sympa (mais pas l'unique) : passer l'image via la propriété background-image sur le h1.
Administrateur
Hello,

Lorsqu'il s'agit d'une image, la première question à se poser est de savoir si c'est une image de décoration ou de contenu : https://www.alsacreations.com/astuce/lire/62-Balise-ltimggt-ou-feuille-de-style-CSS-.html

Dans ton cas, il semble que ce soit clairement une image de contenu, donc a priori tu devrais utiliser l'élément <img> et non un background CSS.
Sauf que ton titre <h1> apporte toute l'information nécessaire et tu n'as pas forcément besoin d'un attribut alt pour l'apporter.

Bref, au final dans ton cas précis, je choisirais également la piste proposée par Olivier C. Mais uniquement parce que ton titre <h1> apporte le sens de l'image.
Olivier C a écrit :
La mauvaise solution : mettre le tout dans une div en position relative et positionner les éléments enfants (h1 et img) en absolute.
Une solution plus sympa (mais pas l'unique) : passer l'image via la propriété background-image sur le h1.

J'ai essayé ta solution, mais là je patauge un peu:
voici mon code HTml:
<div class="titreimage">
<div class="positiontitre">
<img src="./photosbb/imagetitrebb.jpg" alt="origine univers">
<h1 class="rouge">Origine de l'univers</h1>
</div></div>


et le Css:
.titreimage{position: relative;}
.positiontitre{position: absolute;top:10%; right:10%;}


Merci pour votre aide.
Administrateur
abeille a écrit :

J'ai essayé ta solution
Non, ce n'est justement pas ce que nous t'avons conseillé. Nous t'avons tous deux suggéré d'utiliser une image de fond et non une <img> Smiley ohwell

Voici comment y parvenir :
<h1 class="rouge">Origine de l'univers</h1>

.rouge {
background: url(./photosbb/imagetitrebb.jpg) no-repeat center;
}

Modifié par Raphael (07 Aug 2017 - 09:29)
Bonjour,

Tu veux simplement avoir une image de fond pour ta page.
N'utilises pas ta balise de titre pour afficher cette image, car dans ton cas tu cherche vraiment une image de fond pour ta page, et non pas pour ton titre. Et ça n'aurait aucun sens d'afficher une image pleine page dans un bloc <h1>. Il faut utiliser un bloc <div>.

Je te conseil :
<body>
<div class="container">
<h1 class="rouge">Origine de l'univers</h1>
</div>
</body>


.container {
url(./photosbb/imagetitrebb.jpg) no-repeat center;
}

Modifié par GrandGTO (15 Aug 2017 - 11:47)
Sujet clos
Aller à