Mettre une image de fond dans une page web est un exercice très répandu. Avec tout éditeur de page HTML, l'option classique est de générer un code du type : <body background="images/image_de_fond.png">, auquel on peut même ajouter bgproperties="fixed" qui rend fixe l'image de fond ; mais cet attribut ne fonctionne qu'avec MSIE. Avec les feuilles de style on peut obtenir beaucoup plus, tout en séparant la présentation (la mention de cette image) de la structure (l'élément body).
Avertissements préliminaires :
- Une image de fond doit être légère. Comprenez par là qu'une image de 20 ko c'est déjà beaucoup : cela peut être long à charger et provoquer des problèmes d'affichage.
- Attention aux difficultés de lecture qu'une image de fond trop contrastée peut provoquer.
- Attention aussi à toujours prendre une couleur de fond différente de celle de la police de caractère, car en attendant que l'image de fond se charge, on ne verra rien. Le résultat sera également illisible si l'utilisateur a désactivé l'affichage des images dans son navigateur, ou si l'image vient à être indisponible.
Pour illustrer tout cela, visionnez ce mauvais exemple : la photo fait 53 ko ; la couleur utilisée, pour la police de caractère et le fond, est blanche.
Code CSS de base
L'image de fond se déclare en général pour l'élément body (corps de page), mais on peut aussi l'appliquer à un bloc (<div></div>), ou un titre (<hx></hx>), un lien (<a></a>) afin de créer un bouton, etc.
Prenons l'exemple du corps de page. La syntaxe CSS de base sera celle-ci :
body {
color:black;
background-color:white;
background-image:url(images/image_de_fond.png);
margin:0;
}
-
colorrenseigne la couleur de la police de caractère ; -
background-colorest de la couleur de fond de page ; -
background-image:url()est bien-sûr l'adresse de l'image choisie pour le fond de page. Attention : cette URL est relative à celle du fichier CSS, et non à celle du document (X)HTML. - Pour éviter des problèmes de marges parasites, on peut les fixer à 0 pixels à l'aide de
margin:0.
Sans plus de renseignements, l'image de fond apparaît en mosaïque et défile en même temps que le texte.
Comme d'habitude, cette syntaxe CSS est à mettre dans l'en-tête de la page (entre les balises <head></head>) ou dans une feuille de style externe.
Visionner l'exemple 2.
Fond de page fixe
Pour que le fond de page devienne fixe, on rajoutera dans le code :
background-attachment:fixed;
Visionner l'exemple 3.
Positionner l'image
On peut aussi empêcher la mosaïque grâce à la propriété background-repeat et placer ainsi l'image dans une partie très précise de l'écran.
-
Par défaut, l'image se positionne en haut à gauche de l'écran :
body { color:black; background-color:white; background-image:url(images/image_de_fond.png); background-repeat:no-repeat; }Visionner l'exemple 4.
-
Si l'on veut qu'elle se place en haut à droite, on rajoutera le code :
background-position:right top;
ou bien :
background-position:100% 0%;
Visionner l'exemple 5.
-
Pour une position au centre de la page, cela donnera :
background-position:center center;
ou bien :
background-position:50% 50%;
Visionner l'exemple 6.
-
Pour une position en bas à droite :
background-position:right bottom;
ou bien :
background-position:100% 100%;
Visionner l'exemple 7.
Remarques
background-repeat accepte 4 valeurs :
-
no-repeat(image unique) ; -
repeat-xpour une répétition de l'image uniquement horizontale ; -
repeat-ypour une répétition uniquement verticale ; -
repeatpour la mosaïque complète.
Vous aurez remarqué, bien sûr, que les pourcentages dans le background-position offrent plus de lattitude que les attributs right, center, left et top, center, bottom.
Notons enfin qu'on peut aussi cumuler ces différentes informations dans un unique background. Exemple :
body {
background: white url(image_de_fond.png) no-repeat right bottom;
}
Vos commentaires
# Damien Le 31 janvier 2014 à 19:41
Excellent Tutorial, avez-vous des suggestion concernant l’adaptation des background pour les smartphone s’il vous plait ?
Amicalement,
Damien
# Richard SIMONET Le 31 mars 2014 à 18:29
Bonjour, excellent tutoriel en effet.
La seule question que cependant je me pose c’est au niveau de la hauteur de l’image.
Doit on, quand on a beaucoup d’informations sur la page éditer une image très haute (ascenseur) ?
Puisque cette dernière doit être légère, une image à haute résolution par exemple 1920 x 7000 pixels sera trop volumineuse.
Quelle est la solution ?
Merci de votre réponse.
Cordialement.
Richard
# Pascale Lambert Charreteur Le 31 mars 2014 à 18:57 En réponse à : Richard SIMONET
Il est clair qu’une image d’une taille aussi importante risque de ralentir considérablement le chargement.
Si c’est en plus du fin fond de la cambrousse, avec une connexion poussive à tenter de visualiser la page sur un smartphone, vous allez perdre le client ;)
Il existe maintenant en CSS3 des méthodes permettant d’étirer une image. Avec une image en SVG on n’aura pas de perte de qualité.
Je vous invite à lire ces tutoriels :
# Gilles Le 9 février 2015 à 20:04
Bonjour à tous,
Je viens de modifier mon background de cette façon.
body.site
border-top : 3px solid #0088cc ;
padding : 450px ;
background-color : #778E60 ;
background-image : url("http://www.lecoindusenior.com/images/lcds/pommedepin.png") ;
background-repeat : no-repeat ;
background-position : top ;
J’aimerai que cette image pointe vers l’url suivant : http://www.camping-lapommedepin.com/ . comment dois-le l’incorporer dans mon code body-site ?
Par avance merci.
# Pascale Lambert Charreteur Le 11 février 2015 à 16:14 En réponse à : Gilles
Bonjour,
Une image de fond n’a pas vocation à être utilisée pour faire un lien.
Ce n’est ni sémantique, ni accessible.
Déclarez votre image dans le code, "en dur". Et, toujours pour l’accessibilité, n’oubliez pas de mettre un texte alternatif pertinent.
Bonne continuation.
# gwen Le 22 août 2016 à 13:31
ça ressemble à du pompage cet article ( http://css.mammouthland.net/image-de-fond-background-css.php) Si vous n’êtes pas l’auteur, honte à vous, et si vous l’êtes vous pourriez prévenir quelque part dans ces lignes
# Pascale Lambert Charreteur Le 22 août 2016 à 13:50
Bonjour,
Merci de votre vigilance :)
Je suis désolée de ne pas avoir pensé à indiquer que je suis aussi la webmestre de CSS Débutant ! ;) Il n’y a donc aucun plagiat : ce n’est pas le genre de la maison OpenWeb, croyez-le bien.
Encore une fois merci.
# Alexandre 93150 Le 20 mai 2017 à 00:41
Bonsoir,
Depuis 2 jours je galère pour insérer une image à la bonne dimension dans mon background.
Peu importe l’image, l’image est toujours trop grande. Impossible pour moi de la redimensionner.
Pourtant, j’ai redimensionné l’image sur paint mais rien à faire et sur wordpress mais rien à faire.
Ma configuration WP actuelle
– Version de WordPress :4.7.5
– Thème utilisé :Marketplus
– Nom de l’hebergeur :1and1
– Adresse du site :www.conseilretraite.fr
Je ne suis pas expert loin de là mais j’ai vraiment besoin d’aide...
Si vous pouvez inspecter ma page d’accueil et me dire la problématique cela serait gentil de votre part.
Je reste joignable si vous avez besoin d’éléments supplémentaires.
Merci pour votre retour.
Cordialement,
Alexandre
# Pascale Lambert Charreteur Le 20 mai 2017 à 15:58
Bonjour,
Si je comprends bien votre problème, vous voudriez que l’image de fond (grandmere.jpg ?) se redimensionne automatiquement ?
Si oui, vous devriez jeter un coup d’oeil du côté de la propriété css3
background-size:cover. Je pense que cela doit répondre à vos attentes.Vous trouverez un très bon tutoriel sur le site d’alsacreations : un arrière-plan extensible.
En espérant que c’est cela que vous recherchez,
Cordialement,
PascaleLC
# Satsuki Le 12 décembre 2018 à 15:31
Bonjour,
Je suis étudiante et je suis en train de réaliser des pages web sous Dreamweaver. Votre article m’a bien aidée, mais j’aimerais savoir s’il est possible de fixer son background, de manière à ce qu’il ne défile pas en même temps que l’on scroll la page (comme ce que l’on peut faire sur Skyrock par exemple).
Bien à vous.
Vos commentaires
Suivre les commentaires :
|
