Arrière-plans CSS

Apprenez à changer l'arrière-plan d'un élément à l'aide de CSS

L'arrière-plan d'un élément peut être modifié à l'aide de plusieurs propriétés CSS:

  • background-color
  • background-image
  • background-clip
  • background-position
  • background-origin
  • background-repeat
  • background-attachment
  • background-size

et la propriété sténographiquebackground, ce qui permet de raccourcir les définitions et de les regrouper sur une seule ligne.

background-coloraccepte une valeur de couleur, qui peut être l'un des mots-clés de couleur, ou unrgbouhslévaluer:

p {
  background-color: yellow;
}

div { background-color: #333; }

Au lieu d'utiliser une couleur, vous pouvez utiliser une image comme arrière-plan d'un élément, en spécifiant l'URL de l'emplacement de l'image:

div {
  background-image: url(image.png);
}

background-clipvous permet de déterminer la zone utilisée par l'image ou la couleur d'arrière-plan. La valeur par défaut estborder-box, qui s'étend jusqu'au bord extérieur de la bordure.

Les autres valeurs sont

  • padding-boxpour étendre l'arrière-plan jusqu'au bord de remplissage, sans la bordure
  • content-boxpour étendre l'arrière-plan jusqu'au bord du contenu, sans le remplissage
  • inheritpour appliquer la valeur du parent

Lorsque vous utilisez une image comme arrière-plan, vous voudrez définir la position du placement de l'image à l'aide dubackground-positionbiens:left,right,centersont toutes des valeurs valides pour l'axe X, ettop,bottompour l'axe Y:

div {
  background-position: top right;
}

Si l'image est plus petite que l'arrière-plan, vous devez définir le comportement à l'aide debackground-repeat. Devrait-ilrepeat-x,repeat-yourepeatsur tout l'axe? Ce dernier est la valeur par défaut. Une autre valeur estno-repeat.

background-originvous permet de choisir où l'arrière-plan doit être appliqué: à l'ensemble de l'élément, y compris le remplissage (par défaut) en utilisantpadding-box, à l'ensemble de l'élément, y compris la bordure en utilisantborder-box, à l'élément sans le remplissage en utilisantcontent-box.

Avecbackground-attachmentnous pouvons attacher l'arrière-plan à la fenêtre, afin que le défilement n'affecte pas l'arrière-plan:

div {
  background-attachment: fixed;
}

Par défaut, la valeur estscroll. Il y a une autre valeur,local. La meilleure façon de visualiser leur comportement estce Codepen.

La dernière propriété d'arrière-plan estbackground-size. Nous pouvons utiliser 3 mots-clés:auto,coveretcontain.autoest la valeur par défaut.

coveragrandit l'image jusqu'à ce que tout l'élément soit recouvert par l'arrière-plan.

containarrête de développer l'image d'arrière-plan lorsqu'une dimension (x ou y) couvre tout le plus petit bord de l'image, de sorte qu'elle est entièrement contenue dans l'élément.

Vous pouvez également spécifier une valeur de longueur, et si c'est le cas, il définit la largeur de l'image d'arrière-plan (et la hauteur est automatiquement définie):

div {
  background-size: 100%;
}

Si vous spécifiez 2 valeurs, l'une est la largeur et la seconde est la hauteur:

div {
  background-size: 800px 600px;
}

La propriété sténographiquebackgroundpermet de raccourcir les définitions et de les regrouper sur une seule ligne.

Ceci est un exemple:

div {
  background: url(bg.png) top left no-repeat;
}

Si vous utilisez une image et que l'image n'a pas pu être chargée, vous pouvez définir une couleur de secours:

div {
  background: url(image.png) yellow;
}

Vous pouvez également définir un dégradé comme arrière-plan:

div {
  background: linear-gradient(#fff, #333);
}

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: