Accueil du site > Internet. > HTML > CSS

Images et couleurs d’arrière-plan.

mardi 20 juillet 2010 par bibblefree

Couleur d’arrière-plan

Propriété	`background-color`
Exemple	`p.relief { background-color: yellow; }`
Valeurs possibles	nom de couleur prédéfini ou code RVB ; `transparent` (valeur par défaut).
Héritage	Cette propriété n’est pas héritée, mais la valeur par défaut transparent laisse voir la couleur de l’élément conteneur ou se trouvant en dessous.

Nota.

On travaille sur toute les pages.

color:white; permets d’avoir une police en blanc.

Image d’arrière-plan

La propriété background-image permet d’afficher une image en arrière- plan d’un bloc.

Propriété	`background-image`
Exemples	`body {background-image:url(images/maison.png);}` `.pub {background-image:url(http://www.pub.com/logo.gif);}`
Valeurs possibles	`url` (nom d’image avec chemin relatif ou absolu) ou `none` : aucune image (valeur par défaut).
Héritage	Non.

Répétition ou non de l’image d’arrière-plan

Propriété	`background-repeat`
Exemples	`body { background-repeat: repeat-y; }` `.pub { background-repeat: no-repeat; }`
Valeurs possibles	`repeat` : répétition horizontale et verticale (valeur par défaut). `repeat-x` : répétition horizontale seulement. `repeat-y` : répétition verticale seulement. `no-repeat` : pas de répétition.
Héritage	Non.

Exemple.

body { background-image: url("../images/coucou.png"); background-repeat: repeat-y; }

Nota.

On obtient un coucou qui se répétera que sur la première colonne, verticalement.

Alignement de l’image d’arrière-plan

Avec la propriété background-position, il est possible de préciser la position horizontale et la position verticale de l’image d’arrière-plan à l’intérieur du bloc dont elle constitue le fond.

Cette position est exprimée par rapport aux bords de l’élément.

Propriété	`background-position`
Exemples	`body { background-position: center top; }` `.pub { background-position: left center; }`
Valeurs possibles	Une ou deux valeurs, données par des noms ou des nombres (dimension relative ou absolue, souvent exprimée en %). Première valeur pour l’alignement horizontal :`left`, `center` (valeur par défaut), right ou nombre (0% = left, 100% = right). Deuxième valeur pour l’alignement vertical : `top`, `center`(valeur par défaut), `bottom` ou nombre (0% = top, 100% = bottom). Pourcentage % de la taille de la boîte elle-même.
Héritage	Non.

Nota.

Il est possible d’indiquer des nombres négatifs, pour « rogner » l’image.

Voici les positions possibles :

`top`	en haut.
`bottom`	en bas.
`left`	à gauche.
`center`	centré.
`right`	à droite.

Fixation de l’image d’arrière-plan

Propriété	`background-attachment`
Exemples	`body { background-attachment: scroll; }` `.pub { background-atachment: fixed; }`
Valeurs possibles	`scroll` : l’image défile avec le contenu (valeur par défaut) ; `fixed` : l’image reste fixe lors du défilement, seul défile le contenu qui est au premier plan.
Héritage	Non.

Raccourcis pour les arrière-plans

Propriété	`background`
Exemple	`h1 { background: blue url(logo.png) 50% repeat-x fixed; }`
Valeurs possibles	Valeurs de `background-color`, `background-image`, `background-repeat`, `background-attachment`, `background-position` dans un ordre quelconque.
Héritage	Non.