Propriété de style background

Définition et utilisation

background Les propriétés peuvent être définies ou retournées sous forme abrégée pour jusqu'à huit propriétés de fond individuelles.

Grâce à cette propriété, vous pouvez définir/retourner l'un ou plusieurs des éléments suivants (dans n'importe quel ordre) :

Propriété DOM Propriété CSS
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

Les propriétés ci-dessus peuvent également être définies à l'aide de propriétés de style individuelles. Il est fortement recommandé aux auteurs non avancés d'utiliser des propriétés individuelles pour une meilleure contrôlabilité.

Voir également :

Tutoriel CSS3 :Arrière-plan CSS

Tutoriel CSS3 :Arrière-plan CSS3

Manuel de référence CSS :Attribut background

Exemple

Définir le style de l'arrière-plan du document :

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

Essayez-le vous-même

Il y a plus d'exemples TIY en bas de la page.

Syntaxe

Retourner l'attribut background :

object.style.background

Définir l'attribut background :

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

Valeur de l'attribut

Valeur Description
color Définir la couleur de fond de l'élément.
image Définir l'image de fond de l'élément.
repeat Définir le mode de répétition de l'image de fond.
attachment Définir si l'image de fond est fixe ou défilante avec la page.
position Définir la position de départ de l'image de fond.
size Définir la taille de l'image de fond.
origin Définir la zone de positionnement de l'image de fond.
clip Définir la zone de dessin de l'image de fond.
initial Set this property to its default value. Voir initial.
inherit Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut : transparent none repeat scroll 0% 0% auto padding-box border-box
Valeur de retour : Chaîne, représentant l'arrière-plan de l'élément.
Version de CSS : CSS1 + nouvelles propriétés dans CSS3

Plus d'exemples

Exemple 2

Modifier l'arrière-plan du DIV :

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

Essayez-le vous-même

Exemple 3

Définissez la couleur de fond du document :

document.body.style.backgroundColor = "red";

Essayez-le vous-même

Exemple 4

Définissez l'image de fond du document :

document.body.style.backgroundImage = "url('img_tree.png')";

Essayez-le vous-même

Exemple 5

Définissez l'image de fond pour ne pas se répéter :

document.body.style.backgroundRepeat = "repeat-y";

Essayez-le vous-même

Exemple 6

Fixez l'image de fond (ne glisse pas avec le défilement) :

document.body.style.backgroundAttachment = "fixed";

Essayez-le vous-même

Exemple 7

Modifiez l'emplacement de l'image de fond :

document.body.style.backgroundPosition = "top right";

Essayez-le vous-même

Exemple 8

Renvoie la valeur de l'attribut de fond du document :

document.body.style.background;

Essayez-le vous-même

Support du navigateur

background C'est une caractéristique du CSS1 (1996).

Tous les navigateurs le supportent pleinement :

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Support Support Support Support Support Support

Commentaires

Le CSS3 (1999) a ajouté trois nouvelles propriétés :