[css] background image
RésoluJ'aurais juste besoin de savoir s'il est possible d' "obliger" une image de fond (background-image) à se proportionner de façon a remplir la totalité du fond de la page.
Merci d'avance de vos réponses
Isa
Configuration: W98
16 réponses
Le problème concerne la mise à l'échelle d'une image de fond afin qu'elle occupe l'intégralité du fond de page tout en conservant ses proportions, sans déformation et sans laisser de zones non remplies. Plusieurs propositions privilégient le CSS avec background-size: cover et background-position: center center, associé à background-repeat: no-repeat et, selon les cas, background-attachment: fixed pour limiter les déformations. D'autres conseils indiquent des solutions pratiques avec une div dédiée ou une image en plein écran après le body, et affirment que le JavaScript n'est pas nécessaire pour obtenir l'effet. En cas de limitations navigateur, certaines approches consistent à utiliser une div fixe ou d'autres méthodes CSS pour garantir le remplissage complet sans déformation selon la taille de la fenêtre.
-
Contributeur
background-image: url(./images/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) > CSS3 */ -
Bon, en attendant, c'est fini de se prendre la tête:
background-image: url(images/monimage.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
et le tour est joué.
Valable pour ie, chrome, safari, firefox... -
Euh du javascript pour ce genre de chose est inutile vous pourrez trouver la solution avec uniquement du CSS ici:
https://www.reussir-mon-ecommerce.fr/ -
Bonjour,
Pour mettre une image de fond en plein écran y a toujours moyen d'écrire ça (tout de suite après la balise <body>) :
<img src="cequetuveux.jpg" width=100% height=100% style="position: absolute"> -
Salut.
Moi je n'aime pas trop la solution de truthlesslife : ça déforme l'image.
Pour avoir une image de fond qui s'adapte à la taille de la fenêtre tout en conservant ses proportions largeur/hauteur, il faut avoir recours au javascript.
Il existe des scripts tout prêt pour ça : https://reactdom.com/restful-api/ -
Le problème si tu utilises css background c'est que si ta page n'est pas fixe en taille tu ne vas pas pouvoir redimensionner l'image de fond.
Contrairement au design en print la taille d'une page web n'est pas fixe. Pour résoudre ce problème on utilise souvent une div à taille fixe sur laquelle on applique l'image de fond. -
bonjour
cest exactement le problème que je voulais résoudre: mettre limage de background full screen
le truc de truthlesslif et/ou de alsacreations sont exactemen ce quil faut faire
merci -
Oui mais ça ne répond pas à la question.
En plus tu te trompes. Etirer une photo c'est moche, certes, mais si tu as des fonctions spéciales, ça peut être utile d'étirer l'image de la taille X, où X est une variable.
Par exemple pour des votes ou des statistics.
Bref, j'ai justement le même problème que Isa et j'aimerais bien une réponse si quelqu'un sait y répondre.
Merci -
bonjour pouvez vous m'expliquez comment crée des images background pour css
-
Contributeur
-
je pense que ça marche
-
Essayez avec :
background-attachment: fixed !important;
il semble que ça résous le probleme -
Waw ! Sujet lancé en 2005 ! :-P
-
background: url(../images/index0.jpg) no-repeat center fixed;
background-size: cover; -
ça va être assez dégueulasse...
mieux vaut prévoir une image de la taille de ta page (et donc fixer en dur la taille de cette page) ou alors utiliser une image-motif qui va se répéter... -
oui mais en faisant ca tu t interdit de pouvoir modifier limage de fond en fonction du style de page que tu affiche
