CSS Arrière-plan


Les propriétés d'arrière-plan CSS sont utilisées pour définir l'arrière-plan des éléments HTML.

Les propriétés CSS définissent les effets d'arrière-plan :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Couleur d'arrière-plan

La propriété background-color définit la couleur d'arrière-plan d'un élément.

La couleur d'arrière-plan d'une page est appliquée dans le sélecteur body :

Exemple

body {background-color:#b0c4de;}

Essayez-le vous-même »

En CSS, les valeurs de couleur sont généralement définies de la manière suivante :

  • Hexadécimal - par exemple : "#ff0000"
  • RGB - par exemple : "rgb(255,0,0)"
  • Nom de couleur - tel que : "red"

Dans les exemples suivants, les éléments h1, p et div ont des couleurs d'arrière-plan différentes :

Exemple

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Essayez-le vous-même »

Image d'arrière-plan

La propriété background-image décrit l'image d'arrière-plan d'un élément.

Par défaut, l'image d'arrière-plan est répétée (en mosaïque) pour couvrir tout l'élément.

Exemple de définition d'image d'arrière-plan de page :

Exemple

body {background-image:url('paper.gif');}

Essayez-le vous-même »

Voici un exemple de mauvaise combinaison de texte et d'image d'arrière-plan. La lisibilité du texte est mauvaise :

Exemple

body {background-image:url('bgdesert.jpg');}

Essayez-le vous-même »

Image d'arrière-plan - mosaïque horizontale ou verticale

Par défaut, la propriété background-image se répète en mosaïque dans les directions horizontale et verticale de la page.

Certaines images paraissent très incohérentes lorsqu'elles sont répétées en mosaïque dans les deux directions, horizontale et verticale, comme illustré ci-dessous :

Exemple

body
{
background-image:url('gradient2.png');
}

Essayez-le vous-même »

Si l'image est répétée en mosaïque uniquement dans le sens horizontal (repeat-x), l'arrière-plan de la page sera meilleur :

Exemple

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Essayez-le vous-même »

Image d'arrière-plan - définir le positionnement et aucune répétition

RemarkFaire en sorte que l'image d'arrière-plan n'affecte pas la mise en page du texte

Si vous ne voulez pas que l'image se répète, vous pouvez utiliser la propriété background-repeat :

Exemple

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Essayez-le vous-même »

Dans les exemples ci-dessus, l'image d'arrière-plan et le texte sont affichés à la même position. Pour rendre la mise en page plus raisonnable et ne pas affecter la lecture du texte, nous pouvons modifier la position de l'image.

Vous pouvez utiliser la propriété background-position pour modifier la position de l'image en arrière-plan :

Exemple

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Essayez-le vous-même »

Arrière-plan - propriété raccourcie

Dans les exemples ci-dessus, nous pouvons voir que la couleur d'arrière-plan de la page est contrôlée par de nombreux attributs.

Pour simplifier le code de ces propriétés, nous pouvons les combiner en une seule propriété.

La propriété raccourcie pour les couleurs d'arrière-plan est "background" :

Exemple

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Essayez-le vous-même »

Lorsque vous utilisez la propriété raccourcie, l'ordre des valeurs de propriété est :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Vous n'avez pas besoin d'utiliser toutes les propriétés ci-dessus ; vous pouvez les utiliser en fonction des besoins réels de la page.

Cet exemple utilise le CSS présenté précédemment. Vous pouvez consulter les exemples correspondants :Exemples CSS

Examples

Plus d’exemples

Comment définir une image d'arrière-plan fixe
Cet exemple montre comment définir une image d'arrière-plan fixe. L'image ne défilera pas avec le reste de la page.

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

Propriété Description
background La propriété raccourcie est utilisée pour définir les propriétés d'arrière-plan en une seule déclaration.
background-attachment Indique si l'image d'arrière-plan est fixe ou défile avec le reste de la page.
background-color Définit la couleur d'arrière-plan d'un élément.
background-image Définit une image comme arrière-plan.
background-position Définit la position de départ de l'image d'arrière-plan.
background-repeat Définit si et comment l'image d'arrière-plan se répète.
autres extensions