Arrière plan (background)
Cette propriété CSS sert à définir l'arrière-plan (background).
Une couleur en arrière-plan :
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
Une image en arrière-plan :
body {background-image:url('chemin de limage/bgdesert.jpg')}
Répéter une image en arrière-plan :
body {background-image: url('bgdesert.jpg');background-repeat: repeat}
Répéter une image verticalement seulement :
body { background-image: url('bgdesert.jpg');background-repeat: repeat-y}
Répéter une image horizontalement seulement :
body { background-image: url('bgdesert.jpg');background-repeat: repeat-x}
Positionner une image d'arrière-plan :
body { background-image: url('smiley.gif');background-repeat: no-repeat;background-position: center;}
Une image d'arrière-plan fixe (ne bouge pas avec le texte)
body {background-image: url('smiley.gif');background-repeat: no-repeat;background-attachment: fixed}
Toutes les propriétés en une seule déclaration
À utiliser dans cet ordre.
body{ background: #00FF00 url('smiley.gif') no-repeat fixed center; }
Toutes les possibilités
Propriété |
Description |
Valeurs |
background |
Pour écrire en une seule ligne de déclaration |
background-color |
background-attachment |
Détermine si une image sera déroulante ou fixe |
scroll |
background-color |
Determine la couleur |
color-rgb |
background-image |
Détermine une image en arrière-plan |
url(URL) |
background-position |
Détermine la position de départ de l'image |
top left |
background-repeat |
Détermine comment et si une image va être répéter |
repeat |
