Menu
Posez votre question Signaler Répondre au sujet

Mettre une image en fond de page (CSS)... [Fermé]

Fetide68 717 Messages postés dimanche 4 janvier 2009Date d'inscription 26 mars 2018 Dernière intervention - 4 juil. 2011 à 15:16 - Dernière réponse : Fetide68 717 Messages postés dimanche 4 janvier 2009Date d'inscription 26 mars 2018 Dernière intervention
- 4 juil. 2011 à 16:44
CSS Posez votre question Signaler Répondre au sujet
Bonjour,

Je souhaiterais placer une image en fond de page, de façon à ce que cette image prenne toute la page sans être déformée.

C'est pas évident à expliquer, mais il est très facile de trouver un exemple conret de ce que je cherche à faire: la page d'accueil de Google.

On peut depuis un petit moment maintenant, personnaliser sa page d'accueil grâce au lien disponible sur la page "Modifier l'image de fond". Lorsque vous avez choisis votre image, vous pouvez redimensionner la fenêtre à l'infini, l'image ne se déforme pas et couvre toujours la page entière.

Je souhaiterais savoir comment ça marche...

Merci.
Afficher la suite 

6 réponses

Signaler Commenter la réponse de Xeno123
Xeno123 133 Messages postés vendredi 11 septembre 2009Date d'inscription 10 juillet 2012 Dernière intervention - 4 juil. 2011 à 15:18
0
Utile
4
dans ton css et dans la balise body, il y a le background-image:url;
qui te permet de faire ça ^^
Signaler
Fetide68 717 Messages postés dimanche 4 janvier 2009Date d'inscription 26 mars 2018 Dernière intervention - 4 juil. 2011 à 15:23
Merci, mais ensuite, comment faire pour que l'image ne soit pas déformée et prenne toute la page ?
Merci.
Signaler
Xeno123 133 Messages postés vendredi 11 septembre 2009Date d'inscription 10 juillet 2012 Dernière intervention - 4 juil. 2011 à 15:26
site du zero :
background:url("images/fond.png") no-repeat;
width:100%;
Signaler
Fetide68 717 Messages postés dimanche 4 janvier 2009Date d'inscription 26 mars 2018 Dernière intervention - 4 juil. 2011 à 15:29
Je teste...
Signaler
Fetide68 717 Messages postés dimanche 4 janvier 2009Date d'inscription 26 mars 2018 Dernière intervention - 4 juil. 2011 à 16:24
Ca ne fonctionne pas vraiment comme je le pensais.
Il faudrait que je mette une image différente pour chaque résolution d'écran et chaque navigateur... Impossible.
Mais j'ai trouvé la solution... grâce à toi et à Google. Merci.
Signaler Commenter la réponse de Fetide68
Fetide68 717 Messages postés dimanche 4 janvier 2009Date d'inscription 26 mars 2018 Dernière intervention - 4 juil. 2011 à 16:44
0
Utile
Voici donc LA solution poly-navigateurs: 

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}


Avec ça, vous avez une belle image tout plein l'écran, comme sur Google.
Posez votre question