Arrière -plan de style Propriété
Exemple
Styliser l'arrière-plan d'un document :
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La propriété background définit ou renvoie jusqu'à huit propriétés d'arrière-plan distinctes, sous une forme abrégée.
Avec cette propriété, vous pouvez définir/retourner un ou plusieurs des éléments suivants (dans n'importe quel ordre) :
- Couleur de l'arrière plan
- image de fond
- Répétition du fond
- arrière-plan-pièce jointe
- position d'arrière-plan
- taille d'arrière-plan
- background-origine
- clip d'arrière-plan
Les propriétés ci-dessus peuvent également être définies avec des propriétés de style distinctes. L'utilisation de propriétés séparées est fortement recommandée pour les auteurs non avancés pour une meilleure contrôlabilité.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Remarque : Voir la prise en charge de chaque navigateur pour chaque valeur ci-dessous.
Syntaxe
Renvoie la propriété background :
object.style.background
Définissez la propriété background :
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
Valeurs de propriété
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Détails techniques
| Valeur par défaut: | transparent aucun répéter défilement 0% 0% auto padding-box border-box |
|---|---|
| Valeur de retour : | Une chaîne, représentant l'arrière-plan d'un élément |
| Version CSS | CSS1 + nouvelles propriétés en CSS3 |
Plus d'exemples
Exemple
Modifiez l'arrière-plan d'un élément DIV :
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Exemple
Définissez une couleur d'arrière-plan pour un document :
document.body.style.backgroundColor = "red";
Exemple
Définissez une image d'arrière-plan pour un document :
document.body.style.backgroundImage = "url('img_tree.png')";
Exemple
Définissez une image d'arrière-plan sur no-repeat :
document.body.style.backgroundRepeat = "repeat-y";
Exemple
Définissez l'image d'arrière-plan à fixer (ne défilera pas):
document.body.style.backgroundAttachment = "fixed";
Exemple
Changer la position d'une image d'arrière-plan :
document.body.style.backgroundPosition = "top right";
Exemple
Renvoie les valeurs des propriétés d'arrière-plan d'un document :
document.body.style.background;
Pages connexes
Tutoriel CSS : Arrière-plan CSS
Tutoriel CSS3 : Arrière-plans CSS3
Référence CSS : propriété background