Background Adaptable et Fixe pour Page Html
Coeurs-de-
Messages postés
23
Date d'inscription
Statut
Membre
Dernière intervention
-
Chanes -
Chanes -
Bonjour,
Je suis à la recherche d'un petit code ou lignes me permettant d'adapter une image de fond (en background) sur une page Html et ce quelque soit la résolution de l'écran du visiteur.
Je souhaite également si il y a possibilité de faire un étirement intelligent à savoir que si la largeur est grande, la hauteur de l'image restera proportionnelle à l'image d'origine et non obtenir une image toute déformée.
De plus, cette image de background doit être une image fixe.
Avez vous une petite solution à me proposer car ce que j'ai pu trouvé ne correpondait pas à mes attentes.
Merci pour votre aide.
Ceours-de-.
Je suis à la recherche d'un petit code ou lignes me permettant d'adapter une image de fond (en background) sur une page Html et ce quelque soit la résolution de l'écran du visiteur.
Je souhaite également si il y a possibilité de faire un étirement intelligent à savoir que si la largeur est grande, la hauteur de l'image restera proportionnelle à l'image d'origine et non obtenir une image toute déformée.
De plus, cette image de background doit être une image fixe.
Avez vous une petite solution à me proposer car ce que j'ai pu trouvé ne correpondait pas à mes attentes.
Merci pour votre aide.
Ceours-de-.
A voir également:
- Background Adaptable et Fixe pour Page Html
- Supprimer page word - Guide
- Editeur html - Télécharger - HTML
- Imprimer tableau excel sur une page - Guide
- Page d'accueil - Guide
- Page privée - Guide
3 réponses
La solution que je connais, est la suivante. Si tu veut que ton image ne ce déforme pas, choisi de mettre width ou height en auto. Mais l'image ne prendra plus le fond complet.
Il existe surement de meilleurs solution mais c'est la mieux que je connaisse
Partie Css:
#back {
position: absolute; /* dimension et positionnement du bloc conteneur de l'image */
/* tu peut spécifier la position de ton block ici*/
}
.fond{
/* l'image occupe toute la place */
width : 100%;
height: 100%;
}
.p {
position: absolute; /* on place texte par-dessus l'image */
top: 1em;
left: 1em;
font-size: 1.5em;
}
Partie HTML:
<div id="back">
<div class="fond"><img src="source_de_ton_image_de_fond" alt="Arrière plan"></div>
<p> Mon texte ici par dessus mon fond </p>
</div>
En espérant t'avoir aidé
Bonne journée
Chanes
Il existe surement de meilleurs solution mais c'est la mieux que je connaisse
Partie Css:
#back {
position: absolute; /* dimension et positionnement du bloc conteneur de l'image */
/* tu peut spécifier la position de ton block ici*/
}
.fond{
/* l'image occupe toute la place */
width : 100%;
height: 100%;
}
.p {
position: absolute; /* on place texte par-dessus l'image */
top: 1em;
left: 1em;
font-size: 1.5em;
}
Partie HTML:
<div id="back">
<div class="fond"><img src="source_de_ton_image_de_fond" alt="Arrière plan"></div>
<p> Mon texte ici par dessus mon fond </p>
</div>
En espérant t'avoir aidé
Bonne journée
Chanes
