Les propriétés d’origine de CSS
Depuis la première version du langage CSS, nous disposons des propriétés suivantes :
| Fonction | Explication |
|---|---|
background-color | Couleur d’arrière-plan. |
background-image | Image d’arrière-plan. |
background-position | Positionnement de l’image d’arrière-plan. |
background-repeat | Répétition verticale / horizontale de l’image d’arrière-plan : – repeat-x : Répétition horizontale.– repeat-y : Répétition verticale.– no-repeat : Pas de répétition. |
background-attachment | Situation de l’image d’arrière-plan : – scroll : Arrière-plan fixé au contenu de l’élément (à sa bordure), il ne défile pas avec.– fixed : Si l’on défile l’écran, l’image elle restera fixe.– local : Si l’on défile l’élément ayant l’arrière-plan, l’arrière-plan défile avec. |
Les propriétés de CSS3
CSS3 apporte des nouvelles propriétés qui sont background-size, background-clip et background-origin.
La propriété background-size, permet de spécifier la taille de l’image dans l’arrière-plan en pixels, em, auto, pourcentage, etc. Elle peut également prendre la valeur cover qui forcera à couvrir toute la surface sans déformer l’image, quitte à la rogner ; ou encore la valeur contain qui forcera l’image à ne pas dépasser de l’élément et sans la déformer.
La propriété background-clip, permet de définir les limites de l’arrière-plan dans son élément. Elle peut prendre comme valeur soit border-box pour que l’arrière-plan s’étende jusqu’à la bordure de l’élément ; padding-box pour que l’arrière-plan s’étende et s’arrête là où démarre la marge interne de l’élément ; content-box pour que l’arrière-plan se limite au contenu de l’élément.
La propriété background-origin détermine le point d’origine de l’image d’arrière-plan. Elle peut prendre comme valeur border-box pour que ce point soit relatif au bord de l’élément ; padding-box pour que ce point corresponde au padding (marge interne) de l’élément ; content-box pour que ce point soit relatif au contenu de l’élément.
Plusieurs images en arrière-plan
Exemple :
background-image: url("image1"), url("image2");
background-position: right bottom, left top;
background-repeat: no-repeat;Image d’arrière-plan extensible non déformée
Le besoin
Avoir une image de fond qui s’adapte automatiquement à toutes les résolutions, toutes les dimensions de la fenêtre et systématiquement de manière proportionnelle sans jamais être déformée.
Préparation de l’image
L’image doit tout d’abord être suffisamment grande pour les écrans à haute résolution et être rectangulaire. 2000px * 1300px par exemple. Malgré cette grande résolution, il faut optimiser le poids de l’image en choisissant le format .png ou .jpeg supérieur et l’enregistrement pour le web en sélectionnant le meilleur taux de compression tout en conservant la meilleure qualité.
Intégration en CSS
L’image doit simplement être définie en fond de la balise <html> ou <body>, au choix, tout en retirant les marges appliquées par défaut par le navigateur à cette balise et utiliser une propriété CSS3 dédiée :
html#cover {
margin:0;
padding:0;
background: url(image/bg.jpg) no-repeat top center fixed;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
}Ceci ne fonctionne pas pour les version d’Internet Explorer antérieures à la 9 et sur les très anciennes version des autres navigateurs.
Pour que l’image soit automatiquement ajustée lorsque l’on redimensionne la fenêtre, un morceau de code Javascript est nécessaire. Le code est le suivant (nécessite jQuery pour cet exemple) :
function HeightBackground() {
$("html#cover").css({
'height': $(window).height();
}
}
$(document).ready(function() {
HeightBackground();
$(window).resize(function() {
HeightBackground();
}
}