Modifier une image de fond css, ce n’est pas si compliqué;)

La propriété background-image dans CSS applique une image (par exemple au format PNG, SVG, JPG, GIF, WEBP) ou un dégradé à l’arrière-plan d’un élément.

Il vous est possible de modifier ces éléments de différentes manières. Voyons de plus près comment modifier une image de fond css.

 

Je veux modifier une image de fond css

 

Utiliser une image de fond est assez simple, sur l’ensemble du site (le body), vous pouvez faire comme ceci au niveau du css:

 


body {
background-image: url("https://www.business-de-reve.com/wp-content/uploads/2018/02/6.jpg");
}

 

 

Afin de modifier une image de fond css, la valeur url ( ) vous permet de fournir un chemin d’accès (une url direct, ou un accès via la racine) à n’importe quelle image et elle apparaîtra comme arrière-plan pour cet élément. Vous pouvez le faire avec n’importe quelle balise html, l’arrière plan d’un paragraphe, ou même d’un titre, c’est un peu plus compliqué mais vous pouvez aussi créer un arrière plan pour vos images, vos vidéos etc…

 

L’image de fond css est modifiable à souhait. Selon vos besoins, selon vos objectifs de travail…

Si une image d’arrière-plan ne se charge pas ou si votre arrière-plan dégradé est affiché sur un navigateur qui ne prend pas en charge les dégradés, le navigateur recherche une couleur d’arrière-plan en tant que solution de remplacement.

 

Dans ce cas, vous pouvez spécifier votre couleur de repli comme ceci:

 


body {
background-color: #cccccc;
background-image: url("https://www.business-de-reve.com/wp-content/uploads/2018/02/6.jpg");
}

Ce qui donne ceci :

image de fond css

L’image de fond css se répète naturellement et dans toutes les directions (verticalement et horinzontallement, mais vous pourriez avoir envie qu’elle ne se répète pas, dans ce cas vous pouvez utiliser la propriété « background-repeat ». A laquelle vous pouvez associer plusieursv aleurs :

  • repeat-y (pour répéter à la verticale)
  • repeat-x (pour répéter à l’horizontale)
  • no-repeat (pour ne rien répéter)

Sachez aussi que… par défaut, les images répétées sont rognées à la taille de l’élément mais elles peuvent être redimensionnées pour occuper l’espace avec un nombre entier de répétitions (round) voire être distribuées avec des espaces entre les motifs pour remplir la zone (space).

Si vous ne voulez pas de répétition, vous pouvez faire ça :


background-color: #cccccc;
background-image: url("https://www.business-de-reve.com/wp-content/uploads/2018/02/6.jpg");
background-repeat: no-repeat;

Ce qui va vous donner ça :

css arrière plan sans répétition

Et bien sur pour répéter un arrière plan sur un élément à la verticale vous faite : background-repeat: repeat-y; , et à l’horizontale vous faites : background-repeat: repeat-y;

Et c’est tout…

 

 

Vous pouvez également utiliser plusieurs images ou un mélange d’images et de dégradés pour votre arrière-plan.

Nous voici dans la partie un peu plus compliqué du css concernant les arrières plans, on va commencer par l’utilisation de deux images car ça reste facile à comprendre et utiliser…

Voici le genre de code que vous pouvez mettre :


body {
background-image: url("https://www.business-de-reve.com/wp-content/uploads/2018/02/quest.png"), url("https://www.business-de-reve.com/wp-content/uploads/2018/02/6.jpg");
background-color: #cccccc;
}

On ajoute une virgule, on répète un petit code avec l’url et on obtient ça :

css double arrière plan

Bien sur il ne faut pas que l’arrière plan que vous utilisez au premier plan passe devant derrière celui que vous voulez mettre derrière sinon vous ne le verrez pas.

Ça c’est vraiment la forme basique d’un double arrière plan css.  Si vous faites un paragraphe, il y a des chances que vous voulez ne répéter qu’un des deux arrières plans, vous pouvez alors faire comme ceci :


body {

background-image: url("https://www.business-de-reve.com/wp-content/uploads/2018/02/quest.png"), url("https://www.business-de-reve.com/wp-content/uploads/2018/02/6.jpg");

background-repeat: no-repeat, repeat-x;

background-color: #cccccc;

 

}

Avec ce code css, on indique au navigateur qu’il y a deux image d’arrière plan, et qu’on ne veut pas répéter le premier (no-repeat), mais qu’on veut répéter le deuxième horizontalement (repeat-x).

Ce qui donne ça :

deux background css

 

L’ordre des images est peu intuitif, vous devez mettre les images qui seront au dessus des autres en premier. Et l’image qui devrait être à l’arrière en dernier.

Lorsque vous utilisez plusieurs images d’arrière-plan, vous devez souvent définir plus de valeurs pour l’arrière-plan afin de tout placer au bon endroit.

Positionner une image de fond css :

Pour positionner une image de fond en css vous devez définir individuelle deux propriétés, la position, et l’attachement.

Ce qui au niveau du code css donne ceci :

body {
background-image: url(‘https://www.business-de-reve.com/wp-content/uploads/2018/02/quest.png’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

Et ça au niveau du résultat :

center image de fond css

 

Voici d’autres types de propriété background-position possibles que j’ai récupéré sur le guide css de firefox :

position background cssToutes ces positions fonctionnent. Vous n’avez plus qu’à vous amuser à mettre des images d’arrière plan un peu partout maintenant.

Faites connaître ce cours sur vos réseaux sociaux favoris :