[css] background image Résolu

Question

Bonjour,

J'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

Afficher la suite

smed_79 · Accepted Answer

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 */

gzav · Answer

ç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...

Southstyle · Answer

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

truthlesslife · Answer

Bonjour, Pour mettre une image de fond en plein écran y a toujours moyen d'écrire ça (tout de suite après la balise ) :

noob · Answer

oui mais en faisant ca tu t interdit de pouvoir modifier limage de fond en fonction du style de page que tu affiche

Gihef · Answer

Bonjour,

On parle de ça dans cette discussion.

 --

lapino · Answer

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

vorotil · Answer

bonjour pouvez vous m'expliquez comment crée des images  background pour css

michel · Answer

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/

manit4c · Answer

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/

valdoucalours · Answer

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.

drann · Answer

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...

salim_1305 · Answer

je pense que ça marche

numayos · Answer

Essayez avec :
background-attachment: fixed !important;

il semble que ça résous le probleme

LaurentMtns · Answer

Waw ! Sujet lancé en 2005 ! :-P

angesteve3 · Answer

background: url(../images/index0.jpg) no-repeat center fixed;
background-size: cover;

[css] background image

16 réponses

Votre réponse

Discussions similaires