Finissons par quelque chose de simple : modifier l’apparence du fond de vos éléments html.
Par défaut, toutes les pages HTML ont un fond blanc. Mais il existe quelques propriétés CSS qui peuvent être utilisées pour manipuler les arrière-plans.
Nous pouvons changer la couleur de l’arrière-plan, ou ajouter une image à l’arrière-plan.
Couleur d’arrière-plan
Nous pouvons modifier la couleur d’arrière-plan de tout élément HTML à l’aide de la propriété « background-color ».
p {
background-color:red;
}En utilisant cette propriété, la balise <p> aura une couleur d’arrière-plan rouge. Mais ça, vous le saviez déjà.
Parfois, la propriété « background-color » peut être utilisée pour définir l’arrière-plan de la page entière. Pour ce faire, il suffit d’ajouter la propriété « background-color » au corps de la page (désignée par la balise <body> qui se trouve normalement dans tout document html !).
body {
background-color:red;
}Attention, en faisant ceci toute la page verra son fond coloré en rouge !
L’ajout d’image en fond
En plus des couleurs, il est possible, grâce à CSS, de définir des images en guise de fond.
Pour ce faire, il faut utiliser la propriété background-image suivie du chemin vers l’image que vous voulez utiliser comme illustration :
body {
background-image:url(image-de-fond.jpg);
}
Si l’image est petite et qu’elle ne couvre pas l’ensemble du fond, elle va par défaut se répéter :
Il faut alors ajouter la propriété “background-repeat” et lui attribuer la valeur “no-repeat” comme ceci :
body {
background-image:url(image-fond-petite.jpg);
background-repeat:no-repeat;
}
Mais cette fois, l’autre problème qui se pose c’est que la page laisse apparaître du blanc sur toute la surface qui n’est pas couverte ; pour remédier à cela il faut simplement utiliser la propriété “background-size” et lui attribuer la valeur “cover” pour “étirer” l’image sur l’ensemble de la page :
body {
background-image:url(image-fond-petite.jpg);
background-repeat:no-repeat;
background-size:cover;
}Ce qui aura pour effet de ne laisser aucun fond blanc :
Attention cependant à ne pas prendre d’image trop petite : en effet, comme le CSS va “étirer” l’image elle risque de paraître floue !
A vous de trouver le bon compromis entre la résolution “acceptable” à l’œil et le poids de l’image qui ne doit pas ralentir l’affichage du site ! (pour rappel, un poids acceptable pour une belle image de fond tourne autour de 200/300 ko, alors qu’une image d’illustration toute simple devrait tourner autour de 50/100 ko pour ne pas trop impacter l’expérience utilisateur !)
En résumé
- La propriété « background-color » permet de définir la couleur de l’arrière-plan.
- La propriété » background-image » permet de définir une image comme arrière-plan.
- Pour régler la répétition de l’image d’arrière-plan, utilisez la propriété » background-repeat « . Définissez sa valeur comme « no-repeat » si aucune répétition n’est requise.
- Pour étirer l’image à l’ensemble de la fenêtre, utilisez la propriété » background-size » et définissez sa valeur comme » cover « .
Voilà, c’est tout pour aujourd’hui 🙂
Vous avez survolé l’ensemble des propriétés “simples” qu’il est possible d’utiliser avec CSS.
La prochaine étape : agencer une page web avec Flexbox. Nous survolerons cette étape histoire que vous compreniez les principes généraux, mais nous les mettrons en application en utilisant Elementor pour gagner du temps.
Ressources externes
Voici la liste des principales propriétés utilisées en CSS avec exemples de valeurs et des liens vers + d’explications :
- Tableau récapitulatif en français (que vous pouvez dupliquer depuis Google Sheets)
- Le site internet cssreference.io qui liste et classe 129 propriétés CSS selon les besoins d’utilisation (à garder dans vos favoris !)