Arrière-plan CSS

CSS permet d'appliquer des couleurs pures comme fond, ainsi qu'utiliser des images de fond pour créer des effets relativement complexes.

La capacité de CSS dans ce domaine est bien au-delà de celle de HTML.

Couleur de fond

On peut utiliser Propriété background-colorDéfinir la couleur de fond de l'élément. Cette propriété accepte toutes les valeurs de couleur légitimes.

Cette règle définit le fond de l'élément en gris :

p {background-color: gray;}

Si vous souhaitez que la couleur de fond s'étende légèrement à l'extérieur du texte de l'élément, il suffit d'ajouter un peu de marge interne :

p {background-color: gray; padding: 20px;}

Try it yourself

On peut définir la couleur de fond pour tous les éléments, y compris body jusqu'aux éléments en ligne tels que em et a.

background-color ne peut pas être hérité, sa valeur par défaut est transparent. Transparent signifie "transparent". Autrement dit, si un élément n'a pas de couleur de fond spécifiée, le fond est transparent, de sorte que le fond des éléments parents soit visible.

image de fond

Pour insérer une image dans le fond, il faut utiliser Attribut background-image.La valeur par défaut de l'attribut background-image est none, ce qui signifie qu'aucune image n'est placée sur le fond.

Pour définir une image de fond, vous devez attribuer une valeur URL à cet attribut :

body {background-image: url(/i/eg_bg_04.gif);}

La plupart des arrière-plans sont appliqués à l'élément body, mais ce n'est pas limité à cela.

L'exemple suivant applique une image de fond à un paragraphe sans appliquer d'image de fond à d'autres parties du document :

p.flower {background-image: url(/i/eg_bg_03.gif);}

Vous pouvez même définir une image de fond pour des éléments en ligne. L'exemple suivant montre un lien avec une image de fond :

a.radio {background-image: url(/i/eg_bg_07.gif);}

Try it yourself

Théoriquement, il est possible d'appliquer une image de fond aux éléments de remplacement tels que textareas et select, bien que tous les agents utilisateur ne traitent pas cette situation de manière optimale.

De plus, il convient de noter que background-image ne peut pas être hérité. En fait, tous les attributs de fond ne peuvent pas être hérités.

Répétition de l'image de fond

Si vous avez besoin de tiler une image de fond sur une page, vous pouvez utiliser Attribut background-repeat.

La valeur de l'attribut repeat fait que l'image est répétée dans les directions horizontale et verticale, comme dans les pratiques habituelles des images de fond. repeat-x et repeat-y font que l'image est répétée uniquement dans une direction horizontale ou verticale, tandis que no-repeat n'autorise pas la répétition de l'image dans aucune direction.

Par défaut, l'image de fond commence à partir du coin supérieur gauche d'un élément. Regardez l'exemple suivant :

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

Try it yourself

Positionnement de l'image de fond

Il est possible d'utiliser Attribut background-positionModifier la position de l'image dans le fond.

Voici un exemple où une image de fond est placée au centre de l'élément body :

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

Il existe de nombreuses méthodes pour fournir des valeurs à l'attribut background-position. Tout d'abord, vous pouvez utiliser certains mots-clés : top, bottom, left, right et center. Souvent, ces mots-clés apparaissent en paires, bien que cela ne soit pas toujours le cas. Vous pouvez également utiliser des valeurs de longueur, telles que 100px ou 5cm, et également des valeurs en pourcentage. Différents types de valeurs ont un effet légèrement différent sur l'placement de l'image de fond.

Mots-clés

Les mots-clés de placement d'image sont les plus faciles à comprendre, leur fonction est indiquée par leur nom. Par exemple, top right place l'image dans le coin supérieur droit de la marge interne de l'élément.

Selon la norme, les mots-clés de position peuvent apparaître dans n'importe quel ordre, tant qu'ils ne dépassent pas deux mots-clés - l'un pour la direction horizontale, l'autre pour la direction verticale.

Si un seul mot-clé apparaît, l'autre mot-clé est considéré comme center.

Ainsi, si vous souhaitez que chaque paragraphe apparaisse au centre supérieur de chaque paragraphe, il suffit de déclarer comme suit :

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

Voici les mots-clés équivalents :

Mots-clés uniques Mots-clés équivalents
center center center
top top center ou center top
bottom bottom center ou center bottom
right right center ou center right
left left center ou center left

Valeurs en pourcentage

Les valeurs en pourcentage sont plus complexes. Supposons que vous souhaitiez centrer une image dans un élément en utilisant des valeurs en pourcentage, c'est facile :

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

Cela entraînera un placement approprié de l'image, son centre étant aligné avec le centre de l'élément.En d'autres termes, les valeurs en pourcentage s'appliquent à la fois à l'élément et à l'image.Autrement dit, le point décrit comme 50% 50% dans l'image (point central) est aligné avec le point décrit comme 50% 50% dans l'élément (point central).

Si l'image est située à 0% 0%, son coin supérieur gauche sera placé dans le coin supérieur gauche de la marge interne de l'élément. Si l'image est située à 100% 100%, le coin inférieur droit de l'image sera placé dans le coin inférieur droit de la marge droite.

Par conséquent, si vous souhaitez placer une image à 2/3 de la direction horizontale et 1/3 de la direction verticale, vous pouvez le déclarer ainsi :

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

Si une valeur en pourcentage est fournie, cette valeur servira de valeur horizontale, et la valeur verticale sera supposée être 50%. Cela est similaire aux mots-clés.

La valeur par défaut de background-position est 0% 0%, ce qui équivaut fonctionnellement à top left. Cela explique pourquoi l'image de fond est toujours répétée à partir du coin supérieur gauche de la marge interne de l'élément, sauf si vous avez défini une valeur de position différente.

Length values

The length values explain the offset from the top-left corner of the padding area of the element. The offset point is the top-left corner of the image.

For example, if the value is set to 50px 100px, the top-left corner of the image will be 50 pixels to the right and 100 pixels down from the top-left corner of the padding area of the element:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

Note that this is different from percentage values, because the offset is only from one top-left corner to another top-left corner. That is, the top-left corner of the image aligns with the point specified in the background-position declaration.

Background Attachment

If the document is long, then when the document scrolls down, the background image will also scroll with it. When the document scrolls past the position of the image, the image will disappear.

You can use background-attachment propertyPrevent this scrolling. Through this property, you can declare that the image is fixed relative to the visible area (fixed), so it is not affected by scrolling:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

Try it yourself

The default value of the background-attachment property is scroll, which means that by default, the background will scroll with the document.

CSS Background Example

Set the background color
This example demonstrates how to set the background color for an element.
Set the background color of the text
This example shows how to set the background color of part of the text.
Set the image as background
This example demonstrates how to set the image as the background.
Set the image as background 2
This example demonstrates how to set a background image for multiple elements at the same time.
How to repeat the background image
This example demonstrates how to repeat the background image.
How to repeat the background image vertically
This example demonstrates how to repeat the background image vertically.
How to repeat the background image horizontally
This example demonstrates how to repeat the background image horizontally.
How to display the background image only once
This example demonstrates how to display the background image only once.
How to place the background image
This example demonstrates how to place the background image on the page.
How to position the background image using %
This example demonstrates how to use percentages to position the background image on the page.
How to position the background image using pixels
This example demonstrates how to use pixels to position the background image on the page.
How to set a fixed background image
This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page.
All background attributes are declared in one statement
Cet exemple montre comment utiliser la propriété abrégée pour définir toutes les propriétés de fond dans une seule déclaration.

Attributs de fond CSS

Attribut Description
background Propriété abrégée, utilisée pour définir les propriétés de fond dans une seule déclaration.
background-attachment Définir si l'image de fond est fixe ou fait défiler avec le reste de la page.
background-color Définir la couleur de fond de l'élément.
background-image Mettre l'image en arrière-plan.
background-position Définir la position de départ de l'image de fond.
background-repeat Définir si l'image de fond doit être répétée et comment.