Image en fond de page

L'attribut background s'applique à une page HTML ou un élement de page comme <div> ou <p>. Il peut servir aussi à placer une image à coté d'un texte, et pour ce faire on décale le texte avec l'attribut padding ou text-indent. Plus particulièrement, on peut remplacer individuellement les puces dans les listes par ce moyen alors que CSS 2.0 ne permet de spécifier une image que globalement à la liste.

La couleur fond ou l'image de fond et tous les paramètres peuvent être définis en une seule commande:

background : couleur url-image position attachement répétition

Par exemple:

background : blue url(back.jpg) 10% 10% scroll no-repeat

Certains paramètres n'ont de sens qu'avec une image.

Il est possible aussi de spécifier chaque propriété dans une ligne séparée.
Exemple:

background-color:blue;
background-image:url(img.jpg);
background-position: left top;
background-attachement:fixed;
background-repeat: no-repeat.

background-color

La couleur peut être:

Un nom de couleur, comme white, blue, etc.
Un code comme #002244.
Le mot transparent qui n'affiche aucune couleur de fond. C'est la valeur par défaut.

background-image

On spécifie l'URL d'une image sans guillemets. Ce peut être

une URL locale comme url(img.jpg) ou url(images/img.jpg),
une URL relative ou
une URL absolue comme url(https://www.xul.fr/img.jpg).

Spécifier à la fois une couleur et une image est utile quand la position de l'image est décalée.

background-position

Définit le décalage de l'image dans le conteneur. Ne s'applique pas à la couleur de fond.
Elle peut être indiquée par des valeurs absolues, par des pourcentages, ou par des mot-clés.

10px 20px donne une marge de 10 pixel à gauche, et en haut.
5% 10% crée une marge à gauche de 5% de la largeur et en haut de 10% de la hauteur.
left aligne l'image à gauche (par défaut).
top aligne l'image en haut (par défaut).
right équivaut à 100% (moins la largeur de l'image), l'image est alignée à droite.
bottom aligne l'image en bas du conteneur.

Noter que si l'on donne une marge et que l'image est répétée, la marge sera remplie par l'image du fait qu'une texture remplit le conteneur.

background-attachment

Précise si l'image est déroulée avec l'ensemble de la page (du conteneur) ou si elle est fixe, auquel cas le contenu se déplace sur l'image.
Par défaut, le fond accompagne le contenu.

fixed: Le fond est fixe, le contenu est déplacé devant.
scroll: Le fond est déroulé avec le contenu.
inherit: Comme le conteneur parent.

background-repeat

Indique si l'image doit être répétée et utilisée comme texture. Les valeurs sont:

repeat-x: répétition horizontale.
repeat-y: répétition verticale.
no-repeat: aucune répétition.
par défaut, l'image est utilisée comme texture.

Background en CSS 3

De nouvelle propriétés ont été ajoutés, quand aux propriétés déjà dans CSS 2, elles ont des paramètres supplémentaires.

background-image
background-clip
background-size
background-origin
background-break
background-repeat
background-attachment

JavaScript

Le fond et ses propriétés peuvent être modifiés dynamiquement. Sous la forme compacte on change le fond et ses paramètres ainsi:

document.body.style.background="white url(img.jpg) left top scroll both";

Les noms des paramètres individuels sont différents des noms CSS, background-color devient backgroundColor, de même pour les autres paramètres.

backgroundColor
Exemple: document.body.style.backgroundColor='blue';
backgroundImage
Exemple: document.body.style.backgroundImage='url(images/20.jpg)';
backgroundAttachment
backgroundRepeat
backgroundPosition

La valeur assignée doit être donnée entre guillemets, simples ou doubles.

Le code source de la démonstration montre un exemple complet de modification dynamique en JavaScript.

Utiliser dynamiquement la propriété CSS background en JavaScript

Pour montrer comment on peut définir la couleur ou l'image de fond d'une page, une fonction JavaScript modifie de façon globale et dynamique la valeur de cet attribut CSS.

Format:

background: couleur url(image) x y scroll/fixed repeat-x/repeat-y/no-repeat

Pour les images, vous pouvez utiliser images/url(10.jpg) et remplacer 10 par 20, 50, 60, 80.
Pour la position, donner x et y en pourcentage ou valeurs suivies de px. Ex: 10px 10px.

Passez une liste de paramètres à l'attribut background :

La fonction JavaScript:

function setBackground()
{
   var b = document.getElementById("back").value;
   document.body.style.background=b;
}

On peut changer les paramètres individuellement avec par exemple pour changer d'image:

function setImage(img)
{
  document.body.style.background=img;
}

Important!

Si vous avez assigné une couleur de fond à HTML, avec par exemple:

HTML, BODY
{
   background:white;
}

alors vous ne pouvez pas modifier dynamiquement le fond de la page, au moins sur Firefox.

Vous devez corriger la feuille de style...

BODY
{
   background:white;
}

Autres démonstrations