7 propriétés d'arrière-plan CSS pour animer vos conceptions Web

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.

1. Couleur de l'arrière plan

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.

<corps>
<h2>je suis verth2>
<h3>je suis rougeh3>
<h4>Je suis bleuh4>
corps>

En utilisant CSS, vous pouvez appliquer une couleur de fond unique à chaque élément :

corps {
Couleur de l'arrière plan: orange;
}
h2 {
Couleur de l'arrière plan: #006600;
}
h3 {
Couleur de l'arrière plan: RVB(128, 0, 0);
}
h4{
Couleur de l'arrière plan: 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 :

corps {
Couleur de l'arrière plan:orange;
opacité: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.

<corps>
 <h1>Bonjourlà!h1>
 <p>jeontunimagedansmonarrière-plan!p>
corps>

Le fichier CSS :

corps {
image de fond:URL("https://images.pexels.com/Photos/1191710/pexels-photo-1191710.jpeg?auto=compresse&cs=minusculesrgb&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 du 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.

<corps>
<h1>Bonjour!h1>
<h3>Je démontre la propriété repeat background-repeat sur l'axe des x !h3>
corps>

Utilisez le CSS suivant pour appliquer un arrière-plan répétitif le long de l'axe des x :

corps {
image de fond: URL("https://images.pexels.com/Photos/459335/pexels-photo-459335.jpeg?auto=compresse&cs=minusculesrgb&w=1260&h=750&dpr=1");
Répétition du fond: répéter-x;
}

Le résultat:

Ensuite, essayez de répéter l'image sur l'axe y :

corps {
image de fond:URL("https://CDN.pixabay.com/photo/2016/04/18/22/05/coquillages-1337565__340.jpg");
Répétition du fond:répéter-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:

corps {
image de fond:URL("https://images.pexels.com/Photos/259915/pexels-photo-259915.jpeg?auto=compresse&cs=minusculesrgb&w=600");
Répétition du fond: pas de répétition;
}

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 bas, ou une valeur en pixels ou en pourcentage.

Ajoutez une propriété background-position à la dernière image :

corps {
image de fond: URL("https://images.pexels.com/Photos/259915/pexels-photo-259915.jpeg?auto=compresse&cs=minusculesrgb&w=600");
position d'arrière-plan: hautcentre;
}

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 d'arrière-plan

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.

corps {
 image de fond: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compresser&cs=tinysrgb&w=600");
 répétition d'arrière-plan: pas de répétition ;
 position d'arrière-plan: centre ;

Le résultat montre que l'image couvre maintenant la page Web proportionnellement.

6. arrière-plan-pièce jointe

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 :

<corps>
<h1>La propriété background-attachmenth1>
<p>Avec la propriété de pièce jointe fixe, vous remarquerez que l'arrière-plan ne bouge pas avec le texte.p>
<p>Avec la propriété de pièce jointe fixe, vous remarquerez que l'arrière-plan ne bouge pas avec le texte.p>
<p>Avec la propriété de pièce jointe fixe, vous remarquerez que l'arrière-plan ne bouge pas avec le texte.p>
<p>Avec la propriété de pièce jointe fixe, vous remarquerez que l'arrière-plan ne bouge pas avec le texte.p>
<p>Avec la propriété de pièce jointe fixe, vous remarquerez que l'arrière-plan ne bouge pas avec le texte.p>
<p>Avec la propriété de pièce jointe fixe, vous remarquerez que l'arrière-plan ne bouge pas avec le texte.p>
<p>Avec la propriété de pièce jointe fixe, vous remarquerez que l'arrière-plan ne bouge pas avec le texte.p>
<p>Avec la propriété de pièce jointe fixe, vous remarquerez que l'arrière-plan ne bouge pas avec le texte.p>
<p>Avec la propriété de pièce jointe fixe, vous remarquerez que l'arrière-plan ne bouge pas avec le texte.p>
<p>Avec la propriété de pièce jointe fixe, vous remarquerez que l'arrière-plan ne bouge pas avec le texte.p>
<p>Avec la propriété de pièce jointe fixe, vous remarquerez que l'arrière-plan ne bouge pas avec le texte.p>
<p>Avec la propriété de pièce jointe fixe, vous remarquerez que l'arrière-plan ne bouge pas avec le texte.p>
corps>

Le fichier CSS :

corps {
image de fond: URL("https://images.pexels.com/Photos/96627/pexels-photo-96627.jpeg?auto=compresse&cs=minusculesrgb&w=600");
Répétition du fond: sans répétition;
position d'arrière-plan: centre;
taille d'arrière-plan: couverture;
arrière-plan-pièce jointe: fixé;
}

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.

corps {
image de fond: URL("https://images.pexels.com/Photos/96627/pexels-photo-96627.jpeg?auto=compresse&cs=minusculesrgb&w=600");
Répétition du fond: sans répétition;
position d'arrière-plan: centre;
taille d'arrière-plan: couverture;
arrière-plan-pièce jointe: faire défiler;
}

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 :

corps {
Couleur de l'arrière plan: vert;
image de fond: URL("ordinateur portable3.jpg");
Répétition du fond: sans répétition;
taille d'arrière-plan: couverture;
pièce jointe d'arrière-plan: faire défiler;
position d'arrière-plan: centre;
}

Vous pouvez l'écrire sur une seule ligne, comme ceci :

corps {
arrière-plan: vertURL("ordinateur portable3.jpg") sans répétitioncouverturefaire défilercentre;
}

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.