18041 sujets

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

[Résolu] Background-image

Bonjour à tous. J'ai un div avec une image comme background et sur cette image, il y'a du texte. Ma volonté, c'est qu'en petite résolution( dans les médias queries) de faire de cette image un élément à part entière en la dissociant du texte( texte en bas de l'image ou vice versa).
Pour que l'image prenne 100% de la page.
Question de débutant!
Administrateur
Hello,

Je ne connais pas toutes les contraintes et je suis sûr qu'il y en a d'autres, mais en Grid Layout il est très facile de passer d'un affichage à l'autre car l'on peut superposer aisément les éléments les uns sur les autres sans devoir sortir du flux.

Il suffira pas exemple de placer à la fois ton image et ton texte dans la même cellule et le tour est joué.

Exemple : https://codepen.io/raphaelgoetter/pen/oNvKerK?editors=1100
HTML
<section id="banniere">
<div id="blocbanniere">
<p><span>premier paragraphe texte</span>: suite du paragraphe!</p>
</div>
<p id="definition">second paragraphe</p>
<div id="bouton">Plus d'infos</div>
</section>
CSS
#banniere{ background-image: url ( image.jpg);}

Bonjour, Raphael,
effectivement, il te manquait quelques infos. En guise d'exemple(code ci-dessus),
je voulais juste que mon image qui était utilisée en background soit dans la version responsive,
séparée des textes qui étaient sur elle.
Soit l'image est au dessus ou en bas du texte( qu'importe), l'essentiel est qu'elle prenne à elle seule toute la width de l'écran sans texte sur elle.
j'espère t'avoir donné une meilleure description.
Merci encore!
Une image + un texte c'est une <figure>

<figure>
    <img src="..." alt="...">
    <figcaption>
        <p><span>premier paragraphe texte</span>: suite du paragraphe!</p>
       <p id="definition">second paragraphe</p>
    </figcaption>
</figure>

En jouant sur le CSS on peut facilement mettre le texte au dessus de l'image, sur l'image ou au dessous de l'image.
Sachant de plus que dans <figure> on peut mettre plusieurs <img>, plusieurs <figcaption> et même plusieurs <figure> imbriquées, on a une palette de possibilité qui permettent de faire pas mal de choses.
Meilleure solution
Merci Pappy JP,
J'essaie cette solution pour voir ce que ça donnera.
Suis preneur d'autres idées également.
Merci
Sujet clos
Aller à