Ajouter une image de fond

Comprendre comment afficher et bien positionner une image de fond

Image versus background

L'image (ici le logo de la 3WA) est un élément , c'est un contenu et sera référencée par les moteurs de recherche. L'image de fond (les olives) est une décoration déclarée en dans la feuille de style et NE sera PAS référencée par les moteurs de recherche.

Logo3wa

Répétition de l'image

background-repeat: repeat;

Du texte...

background-repeat: no-repeat;

Du texte...

background-repeat: repeat-x;

Du texte...

background-repeat: repeat-y;

Du texte...

Ajustement de la taille de l'image du fond par rapport à son élément.

background-size: contain;

Du texte...

background-size: cover;

Du texte...

background-size: 50%;

Du texte...

background-size: 80% 40%;

Du texte...

Positionnement de l'image.

background-position: center;

Du texte...

background-position: right top;

Du texte...

background-position: right bottom;

Du texte...

background-position: position 80% 40%;

Du texte...