Intégrer des arrière-plans en CSS

background-color

Comme son nom l’indique, cette propriété permet de mettre un fond de couleur derrière un élément. On peut avoir un fond de couleur uniforme mais également avec des dégradés ou de la transparence. Voyons cela en exemple. Nous allons partir sur des fonds de couleur dans un bloc dans lequel nous avons un texte.

Un dégradé peut se faire de multiples façons : de haut en bas, de droite à gauche, l’inverse, du milieu vers l’extérieur… Les combinaisons et le nombre de couleurs sont multiples, vous pouvez utiliser un générateur de code pour vous faciliter la vie.

On peut également jouer sur la transparence d’une couleur de fond en ajoutant la propriété Opacity.

background-image

Background-image permet de mettre une image en arrière-plan d’un élément. Par défaut, l’image est positionnée en haut à gauche et se répète verticalement et horizontalement jusqu’à remplir l’élément. Voyons ce comportement à l’aide d’un 1er exemple.

2 astuces :

• au cas où l’image ne s’affiche pas, nous vous recommandons de mettre un fond de couleur quand même en plus du background image.
• quand on dit que l’image se répète dans toute la surface disponible, cela prend en compte les padding et les bordures (border) mais pas les margin.

Nous verrons un peu plus loin qu’en combinant d’autres propriétés à background-image, on va pouvoir en placer plusieurs dans un même élément, vous devez déjà avoir une petite idée de la manière dont nous allons procéder.

background-repeat

Nous venons de voir que par défaut, une image d’arrière-plan se répète automatiquement verticalement et horizontalement. Donc à quoi sert les background-repeat ?

• D’abord à ne PAS répéter l’image comme dans notre 1er exemple
• ou alors à la répéter seulement dans un sens. L’avantage de répéter l’image horizontalement par exemple, est de pouvoir couper une tranche très fine d’un  motif et de la répéter plutôt que de charger une image plus lourde. Vous gagnerez en performance ! Vous pourrez demander à notre graphiste préféré, Jean-François, de vous expliquer comment couper certains motifs pour que le raccord soit parfait ! (Ca vous rappelle quelques épisodes de pose de papier-peint j’en suis sûre ;-)) Le temps de dire ouf, Jean-François a relevé le challenge et vous a expliqué comment créer et répéter un motif d’arrière-plan.

Dans cet exemple, l’image ne fait que 40 px de large et se répète dans la largeur. Notez le raccord parfait 😉
Pour une répétition verticale, on utilisera la valeur repeat-y.

background-position

Nous avons vu dans background-image que par défaut l’image se positionne en haut à gauche. Grâce à la propriété nous allons pouvoir positionner notre image à d’autres endroits.

• Horizontalement, nous avons 3 choix : left, center, right
• Verticalement aussi : top, center, bottom

=> Ce qui nous donne 9 combinaisons possibles.

Si vous ne spécifiez qu’une valeur, la seconde sera center par défaut. Vous pouvez également utiliser des valeurs en % ou en pixels pour positionner vos images, d’abord à l’horizontal (axe x) puis à la verticale (axe y).

Et donc grâce à cette propriété de positionnement, nous allons pouvoir utiliser plusieurs background-images dans le même bloc. Faisons le test avec les images dont nous disposons déjà.

L’ordre dans lequel vous déclarez vos images est important. Les vagues sont déclarées avant les gouttes de la trame de fond donc les vagues seront au-dessous. Voyez ce que cela donne si on inverse. Et également, voyez comment on peut écrire le code en utilisant la super-propriété background qui regroupe toutes les autres :

background-size

Nous allons maintenant parler… de la taille de l’image ! Et oui ! Alors la propriété background-size peut prendre les valeurs suivantes :

• auto : il s’agit de la taille originale de l’image
• lenght : il s’agit de spécifier la largeur puis la hauteur de l’image, en pixels ou en %. Si une seule valeur est spécifiée, l’autre sera auto par défaut.
• cover : pour couvrir la zone complète
• contain : l’image sera redimensionnée pour être visible

Alors changeons d’image pur voir les résultats possibles.

On voit ici que l’image couvre naturellement la largeur mais pas la hauteur, d’où le gris eu dessus et en dessous.

Ici, on va mettre une largeur à 70% et laisser la hauteur de régler de manière homothétique.

L’image couvre toute la zone. Selon le type d’image, il faut la positionner pour garder à l’écran l’élément important (les fleurs) quand la taille de l’écran change.

L’image est redimensionnée, agrandie ici pour couvrir la largeur, c’est pour ça que j’ai repris l’image de vagues qui fait 300px de large seulement dans une colonne de 450px.

background-blend-mode

Le blend mode est un mode de fusion qui donne de l’effet sur les images. Les valeurs sont les suivantes :

background-clip

On a vu qu’un arrière-plan (couleur ou image) s’étend sur toute la surface disponible, cela prend en compte les padding et les bordures. Background-clip va nous permettre de jouer sur cette zone et de définir jusqu’où l’arrière-plan doit aller. On a comme valeurs :

• border-box : c’est la valeur par défaut. L’arrière-plan va au delà de la bordure.
• padding-box : l’arrière-plan reste à l’intérieur de la bordure.
• content-box : l’arrière-plan reste au niveau du contenu.

Prenons l’exemple simple avec un arrière-plan couleur

background-origin

La background-origin ressemble un peu à ce qu’on vient de voir mais pour un background-image.

• padding-box : cette fois, c’est le padding-box qui est la valeur par défaut. L’image d’arrière-plan est à l’intérieur de la bordure.
• border-box : l’image d’arrière-plan commence sous la bordure.
• content-box : l’image d’arrière-plan commence dans la zone de contenu.