Les arrière-plans en CSS

Un élément HTML, qu’il soit inline ou block, peut se voir attribuer un arrière-plan.

Cet arrière-plan, appelé background, peut être une couleur ou une image, ou les deux à la fois. Il peut être paramétré finement grâce à toute une collection de propriétés CSS.

La propriété background-color

Elle peut prendre plusieurs valeurs

• background-color: orange; littérale
• background-color: #ff023c; hexadécimale
• background-color: rgb(102, 23, 46); RGB
• background-color: rgba(255, 12, 78, 0.3); RGBA pour ajouter une composante de transparence

Exemple

Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam

Le HTML

      </p>
        Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam
      </p>
      

Le CSS

  
    p {
      background-color: #ff02e5;
    }		

Cette propriété ne s’applique généralement pas sur certaines balises telles que IMG, BR, HR…

L’image d’arrière-plan exploite la propriété background-image.

La propriété background-image

On doit lui spécifier le chemin de l’image par rapport à l’endroit du projet où est déclarée la propriété background-image : le fichier style.css qui est dans le dossier /css

Si on considère l’arborescence simple du projet ci-dessus, on voit que les fichiers CSS se trouvent dans un dossier /css et que les fichiers images sont dans un dossier /media

Le chemin pour accéder à une image du dossier media depuis un fichier style.css situé dans le dossier css sera :

background-image: url('../media/mon-image.jpg');

Notez les deux points du début qui signifient au navigateur qu’il doit redescendre d’un niveau pour retourner à la racine du projet, puis aller dans media.

Le HTML

  </p>
    Lorem Arrakis dolor amet. Ut harkonnen ut aliquip ex ea commodo consequat ad minim veniam
  </p>
      

Le CSS

  
    p {
      background-image: url('../images/panda-roux.jpg');
    }		

Cette proporiété s’utilise généralement en combinaison avec background-position et background-repeat

Le positionnement et le mode de répétition de l’arrière-plan peuvent être controlés.

background-position: center;

La propriété background-position

Elle spécifie les coordonnées de placement de l’image d’arrière-plan.

background-position: 0% 50%;

Les unités

background-position accepte plusieurs types de valeurs

• 50% 100% les valeurs en %
• 5px 2px les valeurs en pixels
• center top les valeurs littérales

L’origine du repère est le coin haut supérieur de la balise

La répétition détermine comment doit se répéter l’image d’arrière-plan.

La propriété background-repeat

Exemple : background-repeat: repeat-x

Les unités

background-repeat accepte plusieurs types de valeurs

• repeat la valeur par défaut : l’arrière-plan est répété sur toute la surface du bloc
• no-repeat l’arrière-plan n’est pas répété
• repeat-x l’arrière-plan est répété uniquement sur l’horizontale
• repeat-y l’arrière-plan est répété uniquement sur la verticale

NB : il existe aussi des valeurs plus confidentielles comme space et round

Une des propriétés CSS3 les plus intéressantes est la proporiété background-size

La propriété background-size

Elle spécifie la surface d’occupation de d’arrière-plan.

Exemple

background-size: 450px 100px;

La première valeur représente la largeur de l’image, la seconde sa hauteur

Les unités

background-size accepte plusieurs types de valeurs

• 50% 100% les valeurs en %
• 500px 200px les valeurs en pixels
• 500px auto les valeurs automatiques
• cover la valeur de recouvrement optimal

cover : la valeur magique !

cover est une propriété très utile lorsqu’il s’agit de recouvrir l’arrière-plan d’un élément de manière optimale et sans se soucier des dimensions physiques de l’image de fond

Parfois, on veut simplement recouvrir de manière complète la surface d’une balise (souvent tout le viewport). Un dimensionnement avec background-size: 100% 100%; risque néanmoins de déformer le ratio de l’image.

Comment faire ?

La valeur cover !

background-size: cover;