Pour modifier la taille d’une background image en CSS, il y a plusieurs solutions, comme par exemple les valeurs contain ou cover de la propriété background-size. Mais celles-ci dépendent du wrapper. En pourcentage, même problème: on est dépendant du wrapper (et on risque de déformer l’image). En pixels il faut connaître la taille de l’image. Sass, vite.
Utilisation des %
Essayons ceci:
#wrapper {
width: 400px;
height: 100px;
/* image de 200px par 50px */
background: #fff url(http://placehold.it/200x50) no-repeat;
background-size: 50%;
}oups, problème. Avec background-size: 50% dans cet exemple on ne réduit pas de moitié la taille de l’image, mais elle va prendre 50% de la largeur de notre conteneur (et donc ici se retrouver à sa taille initiale).
Alors en pixels?
Pratique si on connaît la taille d’origine de notre image. Si l’image fait 200px de large, il suffira d’écrire background-size: 100px. Peu importe la taille du conteneur, ça fonctionne.
Avec un mixin, c’est plus simple
Quelle que soit la taille de l’image, quelle que soit la taille du wrapper. Prenons le mixin suivant:
@mixin homotheticBackgroundSize($img, $size: .5) {
@if unit($size) == "%" {
$size: $size / 100%;
}
background-size: (image-width($img) * $size) (image-height($img) * $size);
}
Pour afficher une image avec une taille réduite à 80%, nous écrirons:
#wrapper {
@include homotheticBackgroundSize(my-bg-image.jpg, 80%);
}Bien plus pratique!