Easy-Micro


LANGAGE CSS3
Background CSS3

La propriété background en CSS3

La propriété CSS background-image permettait déjà de positionner plusieurs images de fond comme ceci :
div {
background-image: url('mon-image-devant.png'), url('mon-image-derriere.png');
background-position: right bottom, center bottom;
background-repeat: no-repeat, repeat;
}


Sur les images de fond, deux nouvelles propriétés sont proposées en CSS3 : background-size et background-origin

background-size

CSS3 permet de spécifier la taille de l'image de fond. La taille spécifiée (largeur puis hauteur) est relative à l'élément parent :

background-size: 100% 100%;

Valeurs possibles

  • Dimensions : par exemple "px" ou "%" : précise la hauteur ou la largeur de l'image.
  • "cover" : forcera à couvrir toute la surface sans déformer l'image. Quitte à la rogner.
  • "contain" : forcera l'image à ne pas dépasser de l'élément sans la déformer.
Cette règle de style permet d'avoir un fond proportionnel à l'écran (Full-Background pour un site responsive) quant-on l'applique sur la balise body :

Code CSS de fond proportionnel à la taille de la fenêtre (Décor responsive). Pour le test, réduisez votre fenêtre
body {
background: url('images/monimage.png');
background-repeat: no-repeat;
background-position:center top;
background-size: cover;
}

Attention, les préfixes -moz-, -webkit-, -ms- ou -o- pourront être requis pour les vieux navigateurs.

Pour aller plus loin, découvrez comment avoir un arrière-plan extensible intelligent

Code CSS de fond proportionnel (responsive en version standardisée: image déformée). Pour le test, réduisez votre fenêtre
div
{
background: url('images/monimage.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}

La taille peut être spécifiée en pixels ou en pourcentage.
Attention, il est recommandé de spécifier la propriété background-size après la propriété background.

background-origin

La propriété background-origin positionne la zone de l'arrière plan.

Exemple de positionnement d'image de fond. Ici une content-box : La position de l'arrière plan est relative au contenu
div
{
background:url('images/monimage.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}

Valeurs possibles

  • content-box : La position de l'arrière plan est relative au contenu
  • border-box : La position de l'arrière plan est relative au bord
  • padding-box : La position de l'arrière plan est relative au padding (marge interne)


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Lundi 22 juillet 2019 - Semaine 30 - Sainte Marie-Madeleine (Demain: Sainte Brigitte)
Aujourd'hui, c'est l'anniversaire de Mireille Mathieu (1946-73 ans), chanteuse française.
Haut de page Easy-Micro