CSS3Background 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;
}
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.
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;
}
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%;
}
{
background: url('images/monimage.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
