Médiaforma

Raccourcissez vos styles CSS – background

Print Friendly, PDF & Email

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 …

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.