DEVENIR-WEBMASTER.COM Log In
 35
link W3C close

La gestion du background

Visiter ma chaine Youtube

# Introduction close

Ce qui suit est un résumé de la partie dédiée au background de la spécification CSS3. J'ai retenu ce qui m'a paru indispensable.

La principale évolution apportée par CSS3 concerne la possibilité de gérer plusieurs couches sur un background.

# Qu'est ce qu'on appelle le background ? close

Dans le modèle de boîte c'est la zone du contenu plus sa marge intérieure plus la bordure. La marge extérieure ne fait pas partie du background et est toujours transparente.

Les propriétés du background ne sont pas héritées. Lorsque la couleur du background d'une boîte parent apparaît dans le background d'une boîte enfant c'est parce le background de l'enfant est transparent par défaut. Ce n'est pas un héritage au sens CSS.

# Les propriétés de base d'un background close

La liste des propriétés de base est la suivante : background-color, background-image, background-repeat, background-attachment, background-position, background-clip, background-origin, background-size.

Vous pouvez les spécifier séparément c'est la notation long-hand.

Vous pouvez les spécifier en les regroupant dans une seule déclaration de background c'est la notation short-hand. On verra la syntaxe à la fin du tuto.

# Background-color close

Cette propriété permet de spécifier la couleur d'un background.

# Background-image close

Si vous placez une image en background mieux vaut spécifier un background-color. La couleur sera utilisée lorsque l'image ne sera pas disponible. La couleur sera éventuellement visible dessous l'image lorsque l'image sera disponible.

Cliquez sur le lien background-image et constatez que l'image du background se répète par défaut horizontalement (en x) et verticalement (en y). Vous pouvez changer cela en utilisant la propriété suivante.

# Background-repeat close

Cette propriété spécifie la gestion des répétitions d'une image mise en background.

# Background-attachment close

Cette propriété permet de positionner l'image du background relativement à la fenêtre du navigateur.

# Background-position close

# Background-clip close

Cette propriété spécifie la zone de la boîte qui délimitera la zone du background.

Zone du background

# Background-origin close

Cette propriété spécifie l'origine de la zone de background. (*voir la spec si plusieurs boîtes)

# Background-size close

# Background close

La propriété Background est utilisée pour l'écriture raccourcie (short-hand).

Exemple de notation short-hand sur un background avec plusieurs couches

Background multiple

# Débordement d'une image dans un background close

Si le fond déborde du conteneur il est caché. Ca c'est très important car c'est une propriété qui permet de faire des sprites.

Un background qui déborde

Exemple : Débordement d'une image en background