Comment changer la couleur d’arrière-plan avec CSS
L'un des moments les plus excitants de la carrière de tout développeur front-end en herbe est d'apprendre à changer la couleur d'arrière-plan d'une page Web.
Travailler avec du HTML, c'est bien, mais avec seulement quelques lignes de CSS, vous pouvez donner vie à vos pages et à votre parcours de programmation.
Ce guide couvrira tout ce que vous devez savoir sur la façon de changer la couleur d'arrière-plan avec CSS.
Préparez-vous
Supprimons un petit travail préliminaire.
Remarque : je recommande d'utiliser Visual Studio Code avec l' extension Live Server pour afficher les modifications en temps réel lorsque vous mettez à jour le HTML et le CSS.
- Créez un dossier pour les fichiers de votre projet.
- Créez un fichier index.html pour héberger votre HTML. Vous pouvez utiliser du code standard ou simplement configurer des balises <html> , <head> et <body> .
- Créez un fichier styles.css pour votre CSS.
- Liez votre fichier CSS au HTML en plaçant <link rel = "stylesheet" href = "styles.css"> à l'intérieur des balises <head> .
Vous êtes maintenant prêt à commencer à modifier le CSS.
Comment changer la couleur d'arrière-plan avec CSS
Le moyen le plus simple de modifier la couleur d'arrière-plan consiste à cibler la balise body . Ensuite, modifiez la propriété background-color . Vous pouvez trouver des codes de couleur en recherchant et en utilisant l'extension de navigateur Google Color Picker
body {
background-color: rgb(191, 214, 255);
}
Ce code change l'arrière-plan en un joli bleu clair.
La propriété background-color accepte les couleurs sous six formes différentes:
- nom : lightskyblue; (pour une approximation proche)
- code hexadécimal : # bfd6ff;
- rgb : rgb (191, 214, 255);
- rgba : rgba (191, 214, 255, 1); où a est alpha (opacité)
- HSL : hsl (218 °, 100%, 87%);
- HSLA : hsla (218 °, 100%, 87%, 1); où a est alpha (opacité)
Utilisez la propriété de fond de raccourci à la place de background-color pour couper du code supplémentaire. Vous pouvez modifier la couleur d'arrière-plan de n'importe quel élément HTML à l'aide de cette méthode.
Créez un élément <div> et attribuez-lui une classe – dans ce cas, la classe est panel . Définissez ses propriétés de hauteur et de largeur dans CSS. Sélectionnez l'élément en CSS et coloriez-le.
body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}
Ici, vous pouvez voir que la propriété d' arrière- plan du corps est stylée indépendamment de la propriété d' arrière-plan .panel .
La propriété background accepte également les dégradés:
body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}
Comment changer l'image d'arrière-plan dans CSS
Que faire si vous voulez que l'arrière-plan soit une image plutôt qu'une couleur unie ou un dégradé? La propriété d' arrière-plan de la sténographie est un ami familier.
Assurez-vous que l'image se trouve dans le même dossier que vos fichiers HTML et CSS. Sinon, vous devrez utiliser le chemin du fichier entre parenthèses plutôt que simplement le nom:
body {
background: url(leaves-and-trees.jpg)
}
Whoah! On dirait que l'image est trop agrandie. Vous pouvez résoudre ce problème avec la propriété background-size .
body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}
Pour utiliser la propriété background- shorthand en conjonction avec la propriété background-size cover , vous devez également spécifier les propriétés background-position et séparer les valeurs par une barre oblique inverse (même s'il s'agit de valeurs de position par défaut telles que le coin supérieur gauche .)
body {
background: url(leaves-and-trees.jpg) top left / cover;
}
Voilà! Une image d'arrière-plan correctement dimensionnée dans une ligne de CSS.
Remarque : méfiez-vous des images d'arrière-plan volumineuses qui occupent beaucoup d'espace de stockage. Ceux-ci peuvent être difficiles à charger sur mobile, où vous avez deux secondes pour donner aux utilisateurs une raison de rester sur la page.
Améliorez votre jeu CSS avec CSS box-shadow
Pour un développeur comme vous, les propriétés de couleur d'arrière-plan et d'image d'arrière-plan sont de vieilles nouvelles. Heureusement, il y a toujours quelque chose de nouveau à apprendre.
Essayez de donner un coup de pouce à vos boîtes avec CSS box-shadow. Vos éléments HTML n'ont jamais été aussi beaux!