Background
background : [background-color || background-image || background-repeat || background-attachment || background-position]
background-color :
couleur
Bloc avec un fond jaune : DIV + style
style="background-color : yellow"
style="background-color : yellow"
background-image : url('
adresse
') | none
Bloc avec une image de fond : DIV + style
style="background-image: url('images/Flag_green.png')"
Depuis CSS3, il est possible de déclarer plusieurs images de fond.Il suffit de les placer avec background-position.
style="background: url('images/Flag_green.png') top left no-repeat,
url('images/Flag_blue.png') top right no-repeat,
url('images/Flag_red.png') bottom center no-repeat"
background-size: auto|taille|cover|contain
auto : valeur par défaut. L'image inclut sa taille.
length: la première valeur indique la largeur de l'image, la seconde sa hauteur.
pourcentage : indique la taille de l'image en pourcentage du contenant.
cover : agrandi au maximum l'image afin de couvrir tout le fond, quitte à en faire disparaître une partie.
contain : agrandi au maximum l'image soit en largeur soit en hauteur mais l'image reste visible.
style="width:600px; height : 400px ; border:medium solid ;background : url('images/baleine.svg') no-repeat ; "
style="width:40%; height : 200px ; border:thin solid ;background : url('images/baleine.svg') no-repeat ; padding:22px; display: inline-block ; background-size:300px 150px"
style="width:40%; height : 200px ; border:thin solid ;background : url('images/baleine.svg') no-repeat ; padding:22px; display: inline-block ; background-size:cover"style="width:40%; height : 200px ; border:thin solid ;background : url('images/baleine.svg') no-repeat ; padding:22px; display: inline-block ; background-size:contain"style="width:20%; height : 200px ; border:thin solid ;background : url('images/baleine.svg') no-repeat ; padding:22px ; display: inline-block ; background-size:contain"
background-repeat : repeat | repeat-x | repeat-y | no-repeat
Bloc avec une image de fond en ligne : DIV + style
style="background-image: url('images/Flag_green.png')"
style="background-repeat: repeat-x"
Bloc avec une image de fond en colonne : DIV + style
style="background-image: url('images/Flag_green.png')"
style="background-repeat: repeat-y"
Bloc avec une image de fond unique : DIV + style
style="background-image: url('images/Flag_green.png')"
style="background-repeat: no-repeat"
background-position : [ pourcentage_horizontal pourcentage_vertical ] [ position_horizontale position_verticale ] [ left | center | right ] || [ top | center | bottom ]
background-position : [ pourcentage | longueur ] [ pourcentage | longueur ] --- Départ du calcul : le coin en haut à gauche
background-position : [ left | center | right ] [ top | center | bottom ] --- positionnement horizontal et vertical
Bloc avec une image à 30% à gauche et 60% vers le bas : DIV + style
style="background-image: url('images/Flag_green.png')"
style="background-repeat: no-repeat"
style="background-position: 30% 60%"
Bloc avec une image en bas à droite : DIV + style
style="background-image: url('images/Flag_green.png')"
style="background-repeat: no-repeat"
style="background-position: right bottom"
background-attachment : scroll | fixed | local
scroll : indique que l'image d'arrière-plan défilera dans la fenêtre d'affichage en même temps que le bloc qui la contient
fixed : indique que l'image d'arrière-plan ne défilera pas avec le bloc qui la contient, mais restera fixe dans la fenêtre d'affichage.
local : indique que l'image d'arrière-plan ne défilera pas avec le bloc qui la contient, mais défilera quand le contenu de l'élément défile : elle est fixe par rapport au contenu de l'élément.
Bloc avec une image de fond se déplaçant lors d'un scroll : DIV + style
style="background-image: url('images/Flag_green.png')"
style="background-repeat: no-repeat"
style="background-position: 80% 80%"
style="background-attachment : scroll"
style="overflow : scroll ;"
Bloc avec une image de fond se déplaçant lors d'un scroll : DIV + style
style="background-image: url('images/Flag_green.png')"
style="background-repeat: no-repeat"
style="background-position: 80% 80%"
style="background-attachment : scroll"
style="overflow : scroll ;"
Bloc avec une image de fond fixe lors d'un scroll : DIV + style
style="background-image: url('images/Flag_red.png')"
style="background-repeat: no-repeat"
style="background-position: 80% 80%"
style="background-attachment : fixed"
style="overflow : scroll ;"
Bloc avec une image de fond fixe lors d'un scroll : DIV + style
style="background-image: url('images/Flag_red.png')"
style="background-repeat: no-repeat"
style="background-position: 80% 80%"
style="background-attachment : fixed"
style="overflow : scroll ;"
Bloc avec une image de fond fixe lors d'un scroll : DIV + style
style="background-image: url('images/Flag_blue.png')"
style="background-repeat: no-repeat"
style="background-position: 80% 80%"
style="background-attachment : local"
style="overflow : scroll ;"
Bloc avec une image de fond fixe lors d'un scroll : DIV + style
style="background-image: url('images/Flag_blue.png')"
style="background-repeat: no-repeat"
style="background-position: 80% 80%"
style="background-attachment : local"
style="overflow : scroll ;"
background-clip : border-box | padding-box | content-box
L'arrière plan se limite au contenu (content) ou englobe le padding (padding) ou déborde sur la bordure (border).
style="text-align:justify ; border : medium red outset ; padding : 20% ; background-clip : content-box ; background-color : silver"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
background-origin : border-box | padding-box | content-box
Placement d'une image
background-origin : border-box ; background-image: url('images/Flag_green.png') ; background-repeat : no-repeat ; background-position : left center;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
background-origin : padding-box ; background-image: url('images/Flag_green.png') ; background-repeat : no-repeat ; background-position : left center ;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
background-origin : content-box ; background-image: url('images/Flag_green.png') ; background-repeat : no-repeat ; background-position : left center ;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.