Mettre une image en fond de page (CSS)...

Fermé

Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 - 4 juil. 2011 à 15:16
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 - 4 juil. 2011 à 16:44

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.

A voir également:

Mettre une image en fond de page (CSS)...
Supprimer une page word - Guide
Mettre google en page d'accueil - Guide
Comment mettre une vidéo en fond d'écran - Guide
Traduire une page - Guide
Fond de page word - Guide

2 réponses

Réponse 1 / 2

Xeno123 Messages postés 132 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 10 juillet 2012 23
4 juil. 2011 à 15:18

dans ton css et dans la balise body, il y a le background-image:url;
qui te permet de faire ça ^^

Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
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.

Xeno123 Messages postés 132 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 10 juillet 2012 23
4 juil. 2011 à 15:26

site du zero :
background:url("images/fond.png") no-repeat;
width:100%;

Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
4 juil. 2011 à 15:29

Je teste...

Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
Modifié par Fetide68 le 4/07/2011 à 16:27

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.

Réponse 2 / 2

Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
4 juil. 2011 à 16:44

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.

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

[référencement] Ne pas être référencé

Chemin Logo du site de la Cité de l'espace

"Couleur de page" pour une seule page