Médiaforma

Raccourcissez vos styles CSS – background

Partagez cet article sur vos réseaux

Il existe plusieurs propriétés CSS relatives à l’arrière-plan :

  • background-color définit la couleur de l’arrière-plan ;
  • background-image utilise une image en arrière-plan ;
  • background-repeat indique si l’image est répétée horizontalement et/ou verticalement ;
  • background-attachment indique si l’arrière-plan est fixe ;
  • background-position définit les coordonnées de l’image d’arrière-plan.

Dans cet exemple, le code HTML définit une balise <div> de classe box. Le code CSS détermine les dimensions de la balise, la couleur d’arrière-plan, l’image d’arrière-plan, le mode de répétition de l’image (ici la répétition est verticale mais pas horizontale), le type d’attachement de l’image d’arrière-plan (ici, il s’agit d’un arrière-plan fixe) et la position de l’image d’arrière-plan (à gauche et centrée).

Voici le résultat dans Internet Explorer :

Toutes les propriétés de préfixe background peuvent être rassemblées dans une seule :

.box {
background : #abcdef url(‘neige.jpg’) repeat-y fixed left center;
}

Bien entendu, le résultat est le même …

 
Commentaires

Aucun commentaire pour l'instant.

Laissez un commentaire