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:

background-image

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

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.

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.

background-repeat

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

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.

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.

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.

Compatibilité

Comme toujours les différences viennent avec Internet Explorer 6 et 7. Dans ces versions, le bord, dont la largeur est définie par l'attribut border, n'est pas inclut dans le fond, comme il doit l'être et comme il l'est avec les autres navigateurs.

Référence: Specification CSS 2.0 background. Specification CSS 3.0 Background.

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

© 2010-2014 Xul.fr