1.1 Propriété background-color
La propriété background-color définit la couleur de fond pour un élément. Elle permet de configurer un remplissage coloré pour le fond,
offrant une séparation visuelle du contenu et améliorant la lisibilité du texte et des autres éléments.
Valeurs :
- Noms de couleurs : tu peux utiliser des noms de couleurs prédéfinis, comme
red,blue,green - Valeurs hexadécimales : par exemple,
#ff0000,#00ff00,#0000ff - RGB : par exemple,
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255) - RGBA : par exemple,
rgba(255, 0, 0, 0.5)(rouge semi-transparent) - HSL : par exemple,
hsl(0, 100%, 50%),hsl(120, 100%, 50%),hsl(240, 100%, 50%) - HSLA : par exemple,
hsla(0, 100%, 50%, 0.5)(rouge semi-transparent).
Exemple d'utilisation :
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
<body>
<div class="color-red">Cet élément a un fond rouge.</div>
<div class="color-hex">Cet élément a un fond avec une couleur définie au format hexadécimal.</div>
<div class="color-rgba">Cet élément a un fond vert semi-transparent.</div>
</body>
Explication du code :
background-color: red;: définit un fond rouge pour l'élémentbackground-color: #3498db;: définit la couleur de fond en utilisant une valeur hexadécimalebackground-color: rgba(46, 204, 113, 0.7);: définit un fond vert semi-transparent en utilisant RGBA
1.2 Propriété background-image
La propriété background-image définit une image de fond pour un élément. Elle permet d'utiliser des images pour
rendre les fonds visuellement attrayants, améliorant ainsi le design et la perception de la page web.
Comme valeur, tu dois passer l'URL de l'image — indiquer le chemin vers l'image qui sera utilisée
comme fond. Par exemple, url('image.jpg').
Exemple d'utilisation :
.background-url {
background-image: url('https://via.placeholder.com/150');
width: 150px;
height: 150px;
border: 1px solid #000;
}
<body>
<div class="background-url">Cet élément a une image de fond.</div>
</body>
Explication du code :
background-image: url('https://via.placeholder.com/150');: définit une image comme fond pour l'élément. Dans ce cas, on utilise l'URL de l'image
Avantages de l'utilisation de background-image :
- Attractivité visuelle : l'utilisation d'images de fond permet de créer des pages web plus visuellement attrayantes et intéressantes.
- Contexte : les images de fond peuvent fournir un contexte supplémentaire ou des informations, renforçant la perception visuelle du contenu de la page.
- Branding : les images de fond peuvent faire partie du branding, aidant à maintenir un style cohérent et une reconnaissance du site.
Conseils pour l'utilisation des images de fond :
- Optimisation des images : pour améliorer les performances de la page, il est important d'optimiser les images en réduisant leur taille sans perte de qualité significative
- Compatibilité multi-navigateurs : assure-toi que les images utilisées s'affichent correctement sur tous les navigateurs cibles
- Texte alternatif : pour les images qui ont une importance significative, prévois des moyens alternatifs de transmettre l'information, comme des descriptions textuelles, pour les utilisateurs ayant des limitations
1.3 Utilisation conjointe de background-color et background-image
Les propriétés background-color et background-image peuvent être utilisées ensemble pour créer des fonds complexes et attrayants.
Par exemple, tu peux définir une couleur de fond qui sera visible si l'image de fond ne se charge pas, ou
utiliser une couleur de fond combinée à une image semi-transparente.
Exemple d'utilisation :
.combined-background {
background-color: #3498db;
background-image: url('https://via.placeholder.com/150');
width: 300px;
height: 300px;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid #000;
}
<body>
<div class="combined-background">
Cet élément a un fond combiné avec une image et un fond coloré.
</div>
</body>
Explication du code :
background-color: #3498db;: définit la couleur de fondbackground-image: url('https://via.placeholder.com/150');: définit l'image de fondwidth: 300px;height: 300px;: définit les dimensions de l'élémentcolor: white;: définit la couleur du texte pour une meilleure lisibilité sur le fonddisplay: flex;align-items: center;justify-content: center;text-align: center;: centre le texte à l'intérieur de l'élémentborder: 1px solid #000;: ajoute une bordure autour de l'élément pour un accent visuel
GO TO FULL VERSION