Comment utiliser CSS background-size et background-position —

Il y a beaucoup de choses que nous pouvons faire avec le CSS arrière-plan propriétés. Dans cet article, nous verrons comment utiliser le background-size propriété pour définir la taille d’une image d’arrière-plan, et nous explorerons également les options de positionnement de cette image d’arrière-plan avec background-position.

Mise en place

Pour nos démonstrations d’images d’arrière-plan, nous utiliserons l’image suivante (d’Oia à Santorin, en Grèce). Ses dimensions naturelles sont 400px par 600px.

Voici notre démo CodePen de base, avec un <div> centrée au milieu d’un <article>. (Vous pouvez en savoir plus sur centrage des éléments avec CSS Grid ici.) La div mesure 300px par 200px.

Voir le stylo
Taille d’arrière-plan CSS : modèle par SitePoint (@SitePoint)
sur CodePen.

La div a un arrière-plan jaune et l’image d’arrière-plan sera placée au-dessus de cet arrière-plan jaune (car les couleurs d’arrière-plan sont toujours placées sous n’importe quelle image d’arrière-plan).

Si nous ajoutons simplement l’image en arrière-plan maintenant, nous remarquerons que seule une partie de celle-ci est visible. C’est parce que l’image est plus large et plus haute que la div.

Voir le stylo
CSS background-size : modèle avec image d’arrière-plan par SitePoint (@SitePoint)
sur CodePen.

L’image ci-dessous donne une idée des parties de l’image d’arrière-plan qui ne sont pas visibles en dehors de la div.

Ce n’est évidemment pas un résultat très satisfaisant, alors voyons comment le background-size propriété peut nous aider.

Définition des dimensions d’arrière-plan avec background-size

Au fil des ans, de nouvelles propriétés sont devenues disponibles pour manipuler les images d’arrière-plan en CSS, notamment background-size. Il nous permet de définir la taille d’une image d’arrière-plan, comme nous avons toujours pu le faire avec les images en ligne.

Le background-size propriété offre un choix de deux valeurs de mots-clés — cover et contain — et il peut aussi prendre des valeurs numériques avec des unités telles que px, emet %avec auto. Regardons des exemples de chacun.

taille d’arrière-plan : contient

Le contain force l’image entière à tenir dans son conteneur, même si ses dimensions naturelles sont plus grandes que le conteneur.

Voir le stylo
Taille d’arrière-plan CSS : contient par SitePoint (@SitePoint)
sur CodePen.

Dans cet exemple, nous avons ajouté le CSS suivant :

div {
  background-size: contain;
  background-repeat: no-repeat;
}

Par défaut, une image d’arrière-plan se répétera autant de fois que nécessaire pour remplir le conteneur, donc background-repeat: no-repeat; arrête ce comportement. (Essayez de le retirer pour voir l’image se répéter.)

taille de fond : couverture

Le cover force l’image à couvrir complètement la zone du conteneur, montrant autant que possible l’image mais sans la déformer. Comme l’image est assez haute, nous voyons toute sa largeur mais pas toute sa hauteur.

Voir le stylo
Taille d’arrière-plan CSS : Couverture par SitePoint (@SitePoint)
sur CodePen.

Par défaut, le coin supérieur gauche de l’image de fond est placé dans le coin supérieur gauche de la div, c’est donc la partie inférieure de l’image que l’on ne voit pas, comme représenté dans l’image ci-dessous.

Quand on regarde le background-position propriété, nous apprendrons comment spécifier quelle partie de l’image est visible.

background-size avec d’autres valeurs

Voyons quelles autres valeurs nous pouvons utiliser avec le background-size propriété.

Si nous ajoutons un seul pourcentage de 50%voici ce qui se passe :

Voir le stylo
Taille d’arrière-plan CSS avec une seule valeur % par SitePoint (@SitePoint)
sur CodePen.

L’image d’arrière-plan fait maintenant 50 % de la largeur de la div, mais elle est toujours plus haute que la div, de sorte que la partie inférieure de l’image est masquée. Ainsi, une valeur de pourcentage s’applique à l’axe des x. L’axe des ordonnées est par défaut autoce qui signifie que l’image conserve son rapport d’aspect naturel.

Voici ce qui se passe si nous ajoutons deux pourcentages (50% 50%):

Voir le stylo
Taille d’arrière-plan CSS avec deux % de valeurs par SitePoint (@SitePoint)
sur CodePen.

Ouah ! Maintenant, l’image couvre 50 % de la largeur de la div et 50 % de la hauteur, ce qui signifie que son rapport d’aspect est considérablement déformé.

Nous obtiendrons des résultats similaires si nous échangeons % pour px ou d’autres valeurs unitaires. Nous pourrions, par exemple, faire quelque chose comme background-size: 50px 50pxou background-size: 200px 3em et ainsi de suite. Nous pouvons expérimenter ces valeurs dans le stylet ci-dessus… bien que cette approche soit rarement très utile, car elle déformera l’image d’arrière-plan à moins que nous ne choisissions soigneusement des valeurs qui préservent son rapport d’aspect.

Bien plus utile pour affiner nos paramètres d’image d’arrière-plan est le background-position propriété, alors regardons cela ensuite.

Définition de la position des images d’arrière-plan avec background-position

Nous avons vu plus haut que, par défaut, le coin supérieur gauche de notre image de fond est placé dans le coin supérieur gauche de son conteneur. c’est-à-dire la valeur par défaut background-position le réglage ressemble à ceci :

div {
  background-position: left top; 
}

Le background-position propriété nous donne beaucoup de contrôle sur l’emplacement de notre image d’arrière-plan, et cela fonctionne très bien en conjonction avec background-size: covernous les utiliserons donc ensemble dans les deux prochains exemples.

Utilisation de la position d’arrière-plan avec des mots-clés

Notre exemple d’image a beaucoup de ciel bleu en haut à gauche, alors plaçons-le plutôt à partir du bas à droite :

div {
  background-size: cover;
  background-position: right bottom;
}

Voir le stylo
CSS background-size avec des valeurs de longueur par SitePoint (@SitePoint)
sur CodePen.

En plus des diverses combinaisons de top, bottom, left et rightIl y a aussi center, qui centre bien l’image. (Essayez de remplacer background-position: right bottom; avec background-position: center; dans le stylo ci-dessus.)

Utilisation de background-position avec des valeurs de longueur

Nous pouvons positionner notre image d’arrière-plan avec des valeurs de longueur telles que pixels et ems. Cela nous permet de pousser et de tirer l’image loin des bords du conteneur. Par exemple:

div {
  background-size: cover;
  background-position: 20px 2em;
}

Voir le stylo
CSS background-position avec des valeurs de longueur par SitePoint (@SitePoint)
sur CodePen.

Ici, l’image est définie pour couvrir le conteneur, mais elle est ensuite poussée à 20 px de la gauche du conteneur et à 2 em du haut.

Les valeurs de longueur peuvent être combinées avec des valeurs de mots-clés. Par exemple, bottom 20px right 2em déplace l’image de 20px du bas et de 2em de la droite.

Nous pouvons également utiliser des valeurs négatives pour pousser davantage et tirer notre image d’arrière-plan dans la position souhaitée.

Utilisation de la position d’arrière-plan avec des valeurs en pourcentage

En utilisant le background-position les valeurs en pourcentage nous donnent beaucoup de contrôle sur le positionnement de notre image, mais cela peut être un peu difficile à comprendre. Pour cette démonstration, nous allons supprimer la taille de l’arrière-plan et travailler uniquement avec les dimensions naturelles de l’image :

div {
  background-position: 50% 50%;
}

Voir le stylo
Position d’arrière-plan CSS avec des valeurs en pourcentage par SitePoint (@SitePoint)
sur CodePen.

Alors qu’est-ce que 50% moyenne? 50% de quoi ? Cela signifie que la marque de 50 % de l’image correspond à la marque de 50 % du conteneur. Autrement dit, si nous traçons des lignes verticales et horizontales passant par le centre de l’image et le centre du conteneur, ces lignes correspondront, comme illustré ci-dessous.

Si nous fixons le background-position pour 20% 40%cela signifie qu’une ligne verticale à 20 % à partir de la gauche de l’image correspond à une ligne verticale à 20 % à partir de la gauche de la boîte du conteneur, et qu’une ligne horizontale à 40 % à partir du haut de l’image correspond à une ligne verticale à 40 % à partir du haut de la boîte du conteneur, comme illustré ci-dessous.

Conclusion

Le background-size La propriété est un ajout très utile au CSS et est souvent utile, en particulier lorsque les conteneurs changent de taille dans les mises en page réactives. Le background-position La propriété ajoute plus de puissance en nous permettant de choisir la façon dont les images d’arrière-plan sont positionnées dans un conteneur.

Il y a beaucoup plus à apprendre sur ces deux propriétés, bien que ce que nous avons couvert ici servira probablement les cas d’utilisation les plus courants.

Pour en savoir plus, consultez les pages MDN de ces propriétés :

Ils couvrent d’autres options que nous n’avons pas couvertes ici, telles que la façon de travailler avec plusieurs images d’arrière-plan.

Enfin, il vaut la peine de comparer background-size et background-position propriétés des images d’arrière-plan avec object-fit et object-position propriétés pour les images en ligne – un autre ajout super utile à notre boîte à outils CSS. Vérifier Comment utiliser CSS object-fit et object-position pour se mettre au diapason avec eux.