CSS fournit différentes propriétés pour styliser les éléments HTML. Ces propriétés sont utilisées à différentes fins, comme l'ajout d'une image d'arrière-plan et de la couleur et de régler la largeur et la hauteur des éléments HTML. Ces propriétés comprennent la marge, la couleur, la largeur, la hauteur, l'arrière-plan, la couleur d'arrière-plan et bien d'autres. Plus précisément, la propriété en arrière-plan et en arrière-plan est utilisée pour définir l'arrière-plan des éléments HTML.

Dans ce manuel, nous apprendrons en détail la différence entre les propriétés de fond et de couleur arrière.

Commençons!

Propriété de fond CSS

Pour ajuster l'arrière-plan de tout élément HTML, le CSS "arrière-plan»La propriété est utilisée. Il s'agit d'une propriété scolarisée de huit autres propriétés, ce qui signifie que vous pouvez les utiliser tous en une seule ligne. Ces autres propriétés sont:

• Couleur de l'arrière plan
• image de fond
• position de fond
• taille de l'arrière-plan
• Répétition du fond
• originalité
• fléau de l'arrière-plan
• Attachement des antécédents

Syntaxe

Voici la syntaxe de la propriété d'arrière-plan:

Arrière

Passons à l'explication de toutes les propriétés susmentionnées.

Propriété CSS Background-Color

En utilisant le "Couleur de l'arrière plan»Propriété, vous pouvez définir la couleur de l'arrière-plan. La couleur apparaîtra derrière les éléments HTML.

Syntaxe

La syntaxe de la propriété de couleur arrière est:

Color d'arrière-plan: couleur

À la place de "couleur», Vous pouvez définir la couleur de l'arrière-plan que vous souhaitez apparaître derrière les éléments.

Exemple

Tout d'abord, dans le fichier HTML, nous créerons un conteneur à l'aide de la balise, puis ajouterons un titre et un paragraphe.

Html

Linuxhint

Bienvenue sur notre site

Dans CSS, nous ajusterons la hauteur de la div comme «100%«Pour le faire apparaître sur toute la page et la taille de la police du texte comme«xx grand". Après cela, définissez la couleur d'arrière-plan comme «aqua".

CSS

div
hauteur: 100%;
taille de police: xx-grand;
Color en arrière-plan: Aqua;

Dans l'image fournie ci-dessous, vous pouvez voir que la couleur d'arrière-plan est appliquée:

Propriété CSS en matière d'image d'arrière-plan

Le "image de fond»La propriété est utilisée pour définir une ou plusieurs images comme arrière-plan des éléments HTML. Vous pouvez utiliser cette propriété pour ajouter différentes images d'arrière-plan pour différents éléments.

Syntaxe

La syntaxe de la propriété d'image d'arrière-plan est:

Image de fond: URL ()

Ici, donnez le chemin de l'image que vous souhaitez définir comme arrière-plan comme argument au «URL ()".

Exemple

Dans la poursuite de l'exemple précédent, ajoutez une image d'arrière-plan dans le «div" classe. Nous ajouterons l'URL de l'image comme «URL (IMG.jpg)»:

div
…
Image de fond: URL (IMG.jpg);

La sortie fournie ci-dessous indique que l'image d'arrière-plan a été ajoutée avec succès:

Notez que l'image est répétée. Pour résoudre ce problème, consultez la prochaine propriété.

Propriété de répétition de l'arrière-plan CSS

Lorsque vous ajoutez une image comme arrière-plan sur une page Web, elle se répéte par défaut. Pour éviter cette répétition et définir le modèle en fonction de votre choix, le «Répétition du fond»La propriété est utilisée.

Syntaxe

La syntaxe de la propriété de répétition d'arrière-plan est:

REPEAT-RÉPÉRATION: répéter | répéter-x | répéter-y | sans répétition

La description des valeurs indiquées de la propriété de répétition d'arrière-plan est donnée ci-dessous:

• répéter: Il est utilisé pour répéter l'image dans les deux directions, vertical et horizontal.
• répéter-x: Il est utilisé pour définir la répétition de l'image uniquement horizontalement.
• répéter-y: Il spécifie la répétition verticale de l'image.
• Pas de répétition: Il est utilisé pour éviter la répétition de l'image.

Exemple

Ici, nous définirons la valeur de la propriété de répétition d'arrière-plan comme «sans répétition»:

div
…
République de fond: sans répétition;

Le résultat du code ci-dessus est donné ci-dessous. Vous pouvez voir que l'image n'est plus répétée:

Propriété de position de fond CSS

Pour définir la position de l'image d'arrière-plan, le «position de fond»La propriété est utilisée. Il vous permet d'ajuster l'image dans différentes positions telles que le haut gauche, le centre gauche, le bas gauche, le haut droit, le centre droit et bien d'autres.

Syntaxe

La syntaxe de la propriété de position de fond est:

Position d'arrière-plan: valeur

À la place de "valeur», Vous pouvez spécifier la position de l'image.

Exemple

Ici, nous allons définir la position d'arrière-plan comme «centre»:

div
…
Position d'arrière-plan: Centre;

Dans la sortie ci-dessous, l'image apparaît au centre de la page:

Propriété de la taille de l'arrière-plan CSS

Afin de définir la taille de l'image d'arrière-plan, le «taille de l'arrière-plan»La propriété est utilisée.

Syntaxe

La taille de fond a la syntaxe suivante:

taille arrière: longueur | couverture

Voici la description des valeurs de la propriété de taille arrière:

• longueur: Il est utilisé pour fixer la largeur et la hauteur de l'image d'arrière-plan.
• couverture: Il est utilisé pour ajuster l'image d'arrière-plan dans tout l'arrière-plan.

Exemple

Nous allons définir la taille de l'arrière-plan comme «100%”Hauteur et«80%" largeur:

div
…
taille arrière: 100% 80%;

Vous pouvez voir que l'image a été redimensionnée en fonction des dimensions spécifiées:

Propriété CSS Background-Origin

Le "originalité»La propriété est utilisée pour ajuster la zone de positionnement de l'image d'arrière-plan. L'image est ajustée dans le coin supérieur gauche par défaut.

Syntaxe

La syntaxe de la propriété d'origine arrière est:

Background-Origin: Padding-Box | Border-Box | Content-Box

Les valeurs de la propriété d'origine arrière sont décrites ci-dessous:

• Padding-box: Il s'agit de la valeur par défaut de la propriété d'origine arrière utilisée pour ajuster la position de l'image d'arrière-plan en fonction du bord de la plate-forme.
• Border-Box: Il est utilisé pour définir l'image en fonction de la boîte de bordure de l'image.
• Content-Box: Il est utilisé pour définir l'image d'arrière-plan conformément au contenu de l'image.

Note: La propriété d'origine arrière ne fonctionne pas si la valeur de la propriété d'attachement d'arrière-plan est définie comme «fixé".

Exemple

Tout d'abord, créez une bordure autour du conteneur. Ici, nous continuerons l'exemple précédent et définirons la valeur de rembourrage comme «10px". Après cela, ajustez la largeur de la frontière comme «15px», Style comme«crête», Et la couleur comme«RVB (1, 68, 68)". En fin de compte, nous attribuerons la valeur de la propriété d'origine arrière comme «boîte de contenu»:

div
…
rembourrage: 10px;
Border: 15px Ridge RGB (1, 68, 68);
Background-Origin: Content-Box;

Le résultat du code ci-dessus est donné ci-dessous. Vous pouvez voir que la position de l'image est définie en fonction du contenu de la div:

Propriété CSS Background-Clip

Le "fléau de l'arrière-plan»La propriété fonctionne sur la couleur de l'arrière-plan de l'élément. Il vous permet de contrôler à quel point une couleur d'arrière-plan s'étend au-delà d'un élément, comme le rembourrage de l'élément, sa bordure et son contenu.

Syntaxe

La syntaxe de la propriété de clip de fond est:

Origin d'arrière-plan: Border-Box | Padding-box | boîte de contenu

Les valeurs de la propriété d'origine arrière sont décrites ci-dessous:

• Border-Box: Il s'agit de la valeur par défaut de la propriété d'origine arrière utilisée pour définir la couleur d'arrière-plan derrière la bordure.
• Padding-box: Il est utilisé pour ajuster la couleur dans le padding de l'élément.
• Content-Box: Il est utilisé pour définir la couleur d'arrière-plan en fonction du contenu de l'élément.

Exemple

Nous continuerons l'exemple précédent et modifierons la valeur du style de bordure en «pointé”Pour comprendre la propriété de clip de fond. Après cela, nous définirons la valeur de la propriété de clip de fond comme «padding-box»:

div
…
Clip d'arrière-plan: Padding-Box;

La sortie signifie que la couleur du fond blanc apparaît à la fin du bord de la bordure:

Propriété de l'attachement des antécédents CSS

Le "Attachement des antécédents»La propriété est utilisée pour ajuster le comportement ou l'image tout en faisant défiler la page. Son comportement peut être défini avec d'autres éléments ou fixe.

Syntaxe

La syntaxe de la propriété d'attachement d'arrière-plan est:

Attachement des antécédents: valeur

Vous pouvez définir la valeur de l'attachement en arrière-plan comme «fixé"Pour fixer l'image d'arrière-plan ou"faire défiler«Pour permettre à l'image de faire défiler avec la page.

Note: Par défaut, la valeur de la propriété d'attachement d'arrière-plan est définie comme «faire défiler".

On peut voir que l'image d'arrière-plan ajoutée n'est pas statique lorsque nous avons fait défiler. Maintenant, résolvons ce problème.

Pour ce faire, nous définissons la valeur de la propriété d'attachement d'arrière-plan comme «fixé»:

div
…
Attachement de l'arrière-plan: fixe;

Voici le résultat démontrant que l'image a été fixée:

Maintenant, dirigez-vous vers la comparaison entre les propriétés de fond et de couleur arrière.

CSS Background vs Background-Color

Le tableau donné différenciera les propriétés de fond et de couleur d'arrière-plan sur la base de leurs caractéristiques:

Caractéristiques	Contexte CSS	CSS COLOR
Taper	C'est une super propriété.	C'est une sous-propriété de propriété.
Fonctionnalité	Il définit toutes les propriétés d'arrière-plan.	Il ne définit que la couleur d'arrière-plan.
Gamme	Il prend en charge toutes les propriétés d'arrière-plan	Il ne prend en charge que la propriété de couleur arrière
Niveau	Lorsque vous devez ajouter plusieurs valeurs d'arrière-plan, il est facile à utiliser. Vous pouvez définir les valeurs de toutes les propriétés d'arrière-plan à la fois.	Il peut être utilisé lorsque vous n'avez besoin d'ajouter qu'une seule couleur d'arrière-plan.
Syntaxe	Contexte: valeurs (Les valeurs sont BG-Color, BG-Image et autres propriétés)	Color d'arrière-plan: couleur

Il a été expliqué en quoi les propriétés des couleurs de fond diffèrent des propriétés de fond.

Conclusion

CSS "arrière-plan»La propriété est une propriété raccourci utilisée pour définir plusieurs valeurs d'arrière-plan à la fois, telles que la couleur, l'image, la position, la taille, l'origine et plus. D'autre part, "Couleur de l'arrière plan"Est uniquement utilisé pour ajouter de la couleur à l'arrière-plan. Dans ce guide, nous avons discuté de la différence entre la propriété de fond CSS et la propriété CSS Background-Color.