Arrière-plan CSS vs couleur d'arrière-plan

CSS fournit différentes propriétés pour styliser les éléments HTML. Ces propriétés sont utilisées à différentes fins, telles que l'ajout d'une image et d'une couleur d'arrière-plan et la définition de la largeur et de la hauteur des éléments HTML. Ces propriétés incluent 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, les propriétés background et background-color sont utilisées 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 d'arrière-plan et de couleur d'arrière-plan.

Commençons!

Propriété d'arrière-plan CSS

Pour ajuster l'arrière-plan de n'importe quel élément HTML, le CSS ' Contexte ” la propriété est utilisée. Il s'agit d'une propriété abrégée de huit autres propriétés, ce qui signifie que vous pouvez toutes les utiliser sur une seule ligne. Ces autres propriétés sont :

Couleur de l'arrière plan
image de fond
position d'arrière-plan
taille d'arrière-plan
Répétition du fond
background-origine
clip d'arrière-plan
arrière-plan-pièce jointe

Syntaxe

Voici la syntaxe de la propriété background :

arrière-plan : position/taille de l'image en couleur répéter l'origine du clip

Passons à l'explication de toutes les propriétés mentionnées ci-dessus une par une.

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é background-color est :

Couleur de l'arrière plan : Couleur

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

Exemple

Tout d'abord, dans le fichier HTML, nous allons créer un conteneur à l'aide de la balise

, puis ajouter un titre et un paragraphe.

HTML

< div >

< h1 > LinuxHintGenericName < / h1 >

< p > Bienvenue sur notre site < / p >

< / div >

En 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-large ”. Après cela, définissez la couleur d'arrière-plan sur ' aqua ”.

CSS

div {

la taille : 100% ;

taille de police : xx-large ;

Couleur de l'arrière plan : aqua ;

}

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

Propriété CSS background-image

La ' image de fond ” 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é background-image est :

image de fond : url()

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

Exemple

Dans la continuité de l'exemple précédent, ajoutez une image de fond dans le champ ' div ' classer. Nous ajouterons l'url de l'image comme ' URL(img.jpg) ” :

div {

...

image de fond : URL ( img.jpg ) ;

}

La sortie 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 propriété suivante.

Propriété CSS background-repeat

Lorsque vous ajoutez une image en arrière-plan sur une page Web, elle est répétée par défaut. Pour éviter cette répétition et régler le motif selon votre choix, le « Répétition du fond ” la propriété est utilisée.

Syntaxe

La syntaxe de la propriété background-repeat est :

Répétition du fond : répéter | répéter-x | répéter | sans répétition

La description des valeurs déclarées de la propriété background-repeat est donnée ci-dessous :

répéter: Il est utilisé pour répéter l'image dans les deux sens, 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.
non-répétition : Il est utilisé pour éviter la répétition de l'image.

Exemple

Ici, nous allons définir la valeur de la propriété background-repeat comme ' sans répétition ” :

div {

...

Répétition du fond : sans répétition ;

}

Le résultat du code fourni ci-dessus est donné ci-dessous. Vous pouvez voir que l'image ne se répète plus :

Propriété CSS background-position

Pour définir la position de l'image d'arrière-plan, le ' position d'arrière-plan ” 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é background-position est :

position d'arrière-plan : évaluer

À la place de ' évaluer ”, 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é CSS background-size

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

Syntaxe

Background-size a la syntaxe suivante :

taille d'arrière-plan : longueur|couverture

Voici la description des valeurs de la propriété background-size :

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 d'arrière-plan : 100% 80% ;

}

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

Propriété CSS background-origin

La ' background-origine ” 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é background-origin est :

background-origine : padding-box| border-box | boîte de contenu

Les valeurs de la propriété background-origin sont décrites ci-dessous :

padding-box : Il s'agit de la valeur par défaut de la propriété background-origin utilisée pour ajuster la position de l'image d'arrière-plan en fonction du bord de remplissage.
border-box : Il est utilisé pour définir l'image en fonction de la bordure de l'image.
boîte de contenu : Il est utilisé pour définir l'image d'arrière-plan en fonction du contenu de l'image.

Noter: La propriété background-origin ne fonctionne pas si la valeur de la propriété background-attachment est définie sur ' fixé ”.

Exemple

Tout d'abord, créez une bordure autour du conteneur. Ici, nous allons continuer l'exemple précédent et définir la valeur de rembourrage comme ' 10px ”. Après cela, ajustez la largeur de la bordure comme ' 15px ', styliser comme ' crête ', et la couleur comme ' RVB(1, 68, 68) ”. En fin de compte, nous attribuerons la valeur de la propriété background-origin à ' boîte de contenu ” :

div {

...

rembourrage : 10 pixels ;

frontière : 15px crête RVB ( 1 , 68 , 68 ) ;

background-origine : boîte de contenu ;

}

Le résultat du code fourni 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

La ' clip d'arrière-plan ” La propriété fonctionne sur la couleur d'arrière-plan de l'élément. Il vous permet de contrôler jusqu'où 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é background-clip est :

background-origine : border-box | boîte de rembourrage | boîte de contenu

Les valeurs de la propriété background-origin sont décrites ci-dessous :

border-box : Il s'agit de la valeur par défaut de la propriété background-origin 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 la zone de remplissage de l'élément.
boîte de contenu : Il est utilisé pour définir la couleur de fond en fonction du contenu de l'élément.

Exemple

Nous allons continuer l'exemple précédent et changer la valeur du style de bordure en ' pointé ” pour comprendre la propriété background-clip. Après cela, nous définirons la valeur de la propriété background-clip sur ' boîte de rembourrage ” :

div {

...

clip d'arrière-plan : boîte de rembourrage ;

}

La sortie signifie que la couleur d'arrière-plan blanche s'affiche lorsque le bord de la bordure est terminé :

Propriété CSS background-attachment

La ' arrière-plan-pièce jointe ” La propriété est utilisée pour ajuster le comportement ou l'image lors du défilement de la page. Son comportement peut être défini en défilement avec d'autres éléments ou fixe.

Syntaxe

La syntaxe de la propriété background-attachment est :

arrière-plan-pièce jointe : évaluer

Vous pouvez définir la valeur de background-attachment sur ' fixé ' pour corriger l'image d'arrière-plan ou ' faire défiler ” pour permettre à l'image de défiler avec la page.

Noter: Par défaut, la valeur de la propriété background-attachment est définie sur ' 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. Réglons maintenant ce problème.

Pour ce faire, nous définissons la valeur de la propriété background-attachment sur ' fixé ” :

div {

...

arrière-plan-pièce jointe : fixé ;

}

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

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