Le thème d’arrière-plan de votre site Web peut affecter considérablement son apparence. Les couleurs, les images et les motifs d’arrière-plan invoquent l’émotion et créent des expériences utilisateur exceptionnelles.
Vous pouvez utiliser les propriétés d’arrière-plan CSS pour définir le style d’arrière-plan des éléments HTML. Apprenez tout sur certaines des propriétés CSS que vous pouvez utiliser pour créer d’excellents arrière-plans.
UTILISEZ LA VIDÉO DU JOURFAITES DÉFILER POUR CONTINUER AVEC LE CONTENU1. couleur de fond
Le propriété background-color définit la couleur de l’arrière-plan d’un élément. Vous pouvez définir la couleur en utilisant un nom comme “rouge”, une valeur HEX comme “#00FF00” ou une valeur RVB – comme “rgb(0, 255, 0)”. Vous pouvez également utiliser une valeur HSL pour définir la couleur d’arrière-plan à l’aide de la teinte, de la saturation et de la luminosité.
L’exemple suivant définit la couleur d’arrière-plan de toute la page sur orange. Les éléments d’en-tête ont chacun un arrière-plan différent.
<body>
<h2>I am Green</h2>
<h3>I am Red</h3>
<h4>I am Blue</h4>
</body>
En utilisant CSS, vous pouvez appliquer une couleur de fond unique à chaque élément :
body {
background-color: orange;
}h2 {
background-color: #006600;
}
h3 {
background-color: rgb(128, 0, 0);
}
h4{
background-color: hsl(240, 100%, 50%);
}
Cela va styliser la page pour qu’elle ressemble à :
Vous pouvez utiliser la propriété opacity pour déterminer la transparence d’un élément. L’opacité prend des valeurs comprises entre 0,0 et 1,0. Plus la valeur est faible, plus l’élément est transparent.
Par exemple, essayez de définir l’opacité d’un élément de corps sur 0,5 :
body {
background-color:orange;
opacity:0.5;
}
Cela s’affichera comme suit—comparez les couleurs à celles de la capture d’écran précédente :
2. image de fond
La propriété background-image définit une image comme arrière-plan d’un élément. Vous pouvez référencer une image locale ou une image provenant d’Internet.
<body>
<h1>Hello there!</h1>
<p>I have an image in my background!</p>
</body>
Le fichier CSS :
body {
background-image:url("https://images.pexels.com/photos/1191710/pexels-photo-1191710.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
}
Cela s’affichera ainsi :
Vous pouvez aussi utiliser dégradés de fond pour créer un look unique pour votre application.
3. répétition de fond
La propriété background-image répète les images par défaut. Vous pouvez choisir de répéter l’image horizontalement sur l’axe des x ou verticalement sur l’axe des y.
Alternativement, si une répétition ne convient pas à votre style, vous pouvez la supprimer en utilisant la valeur sans répétition.
<body>
<h1>Hello There!</h1>
<h3>I am demonstrating the repeat background-repeat property on the x-axis!</h3>
</body>
Utilisez le CSS suivant pour appliquer un arrière-plan répétitif le long de l’axe des x :
body {
background-image: url("https://images.pexels.com/photos/459335/pexels-photo-459335.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-repeat: repeat-x;
}
Le résultat:
Ensuite, essayez de répéter l’image sur l’axe y :
body {
background-image:url("https://cdn.pixabay.com/photo/2016/04/18/22/05/seashells-1337565__340.jpg");
background-repeat:repeat-y;
}
Le résultat:
L’exemple sur l’axe des y semble certainement déformé. Si ce ne sont pas les modèles que vous recherchez, vous pouvez spécifier sans répétition plutôt:
body {
background-image:url("https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=600");
background-repeat:no-repeat;
}
Le résultat:
4. position d’arrière-plan
La propriété background-position définit la position de l’image d’arrière-plan dans son élément. Il utilise des mots-clés spécifiques à la position tels que centre, haut, et basou une valeur en pixels ou en pourcentage.
Ajoutez une propriété background-position à la dernière image :
body {
background-image: url("https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=600");
background-position: top center;
}
Il ressemblera à ceci:
Vous pouvez voir que l’image déforme l’apparence du site Web. Réglons cela avec la propriété suivante.
5. taille de fond
Vous pouvez utiliser la propriété background image pour définir une taille spécifique pour l’image. Il utilise des mots-clés comme couverture et contenir ou un pixel ou une valeur en pourcentage. Corrigeons l’image d’arrière-plan déformée en ajoutant une propriété background-size.
body {
background-image: url("https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=600");
background-repeat: no-repeat;
background-position: center;
Le résultat montre que l’image couvre maintenant la page Web proportionnellement.
6. pièce jointe en arrière-plan
La propriété background-attachment définit si la position de l’image d’arrière-plan reste fixe ou défile. Vous pouvez utiliser les mots-clés fixe ou défilement.
Montrons cela dans le code suivant :
<body>
<h1>The background-attachment property</h1>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
<p>With the fixed attachment property you will notice that the background does not move with the text.</p>
</body>
Le fichier CSS :
body {
background-image: url("https://images.pexels.com/photos/96627/pexels-photo-96627.jpeg?auto=compress&cs=tinysrgb&w=600");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
Si vous vous déplacez vers le bas de la page, vous remarquerez que l’arrière-plan ne bouge pas :
Pour illustrer la propriété scroll background-attachment, remplacez le mot-clé par faire défiler. Vous remarquerez que maintenant l’arrière-plan se déplace avec le texte.
body {
background-image: url("https://images.pexels.com/photos/96627/pexels-photo-96627.jpeg?auto=compress&cs=tinysrgb&w=600");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: scroll;
}
7. La propriété abrégée d’arrière-plan
Vous remarquerez peut-être que vous devez inclure plusieurs propriétés pour obtenir l’arrière-plan parfait. Cela implique d’écrire beaucoup de code. Mais vous pouvez raccourcir le code en utilisant la propriété abrégée background.
La propriété abrégée vous permet de définir de nombreuses propriétés d’arrière-plan sur une seule ligne. Vous utilisez le mot clé arrière-plan pour définir la propriété abrégée.
Par exemple, au lieu d’écrire un code comme celui-ci :
body {
background-color: green;
background-image: url("laptop3.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachement: scroll;
background-position: center;
}
Vous pouvez l’écrire sur une seule ligne, comme ceci :
body {
background: green url("laptop3.jpg") no-repeat cover scroll center;
}
La propriété abrégée suit un ordre particulier. Vous devez aligner les propriétés dans cet ordre même s’il en manque une ou plusieurs. La commande est :
- Couleur de l’arrière plan
- image de fond
- Répétition du fond
- arrière-plan-pièce jointe
- position d’arrière-plan
Vous pouvez créer des conceptions intéressantes avec CSS en utilisant divers motifs de fond. Avec ces modèles, vous pouvez obtenir des arrière-plans uniques et exceptionnels pour votre site Web.
Autres propriétés d’arrière-plan en CSS
Le CSS est puissant et vous pouvez en faire beaucoup pour pimenter votre application. Vous pouvez utiliser des propriétés telles que background-clip, background-origin et background-blend-mode pour ajouter de l’animation.
Vous pouvez également utiliser des dégradés et des motifs pour personnaliser vos pages. Expérimentez avec les propriétés d’arrière-plan CSS pour affiner vos compétences en conception Web.
to www.makeuseof.com
Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931