Utiliser les arrière-plans avec CSS3

Les images d’arrière-plans, ou background, sont très utilisées sur les sites web. Et tout cela est possible grâce aux propriétés CSS3 !

Définir la couleur du fond

Vous pouvez définir une couleur de fond, avec la propriété background-color.

Vous mettez votre couleur format RGB, hexadécimal, hexadécimal abrégé etc., comme nous l’avons déjà vu. Tout cela permet de définir la couleur de fond pour une image, pour une div, pour un span, pour un paragraphe, pour body, pour input dans les champs de formulaire…

Vous pouvez définir une couleur de fond pour ce que vous voulez.

Exemple :

div { background-color: #CC2EFA; }

Chaque balise div portera la propriété background-color:#CC2EFA. Et vous pouvez la coupler avec d’autres propriétés. Par exemple, mettez une largeur, width, à 250 pixels.

Avec font-size, vous modifiez la taille de la police à 28 pixels.

Le texte sera centré, et vous pouvez faire ressortir des éléments importants sur votre page HTML en utilisant à chaque fois une simple balise div.

Ajouter une image de fond

Vous pouvez bien évidemment définir des images pour le fond. Utilisez la propriété background-image.

Pour changer, complétez cette propriété en transmettant l’URL background.png, ou l’URL complète en passant par un nom de domaine.

Exemple :

body { background-image: url(background.jpg); }

Voici un exemple qui ajoute une image de fond sur toute la page HTML.

Cette propriété CSS se situe sur la balise body. Vous voyez souvent sur des sites internet une grande page d’accueil avec un formulaire qui vous demande votre nom, votre prénom avec un bouton Envoyer. Derrière, il y a un background-image définit sur body. Vous pouvez ajouter ce même type de graphique maintenant sur vos sites internet.

Répéter l’image de fond

Vous pouvez choisir de répéter l’image de fond. Sur certains sites internet, il s’agit d’une petite image, qui fait 3 pixels sur 3, ou 10 pixels sur 10, qui est répétée à la suite des autres. Et cette technique permet de construire votre une image de fond. C’est une très bonne astuce pour optimiser la rapidité d’affichage de votre site.

Utilisez background-repeat, repeat permet de répéter l’image de fond.

Vous avez différentes valeurs pour la propriété :

repeat répète l’image horizontalement et verticalement.

repeat-x répète seulement l’image horizontalemen.

repeat-y répète seulement l’image verticalement.

no-repeat affiche l’image une seule fois sans la répéter.

Un petit exemple qui utilise une image de 10 pixels sur 10 pixels, l’image se répète horizontalement et verticalement :

body {
  background-image: url(background.jpg);
  background-repeat: repeat;
}

Positionner l’image

Autre possibilité, vous pouvez positionner l’image dans votre page HTML, ou dans votre div, avec background-position.

Vous transmettez les coordonnées X et Y en pixels ou alors les valeurs pour les positions, left, center, right, top ou bottom. Pour respectivement la gauche, le centre (vertical et horizontal), la droite, le haut ou le bas. Si vous voulez que votre image s’affiche au centre en bas, mettez bottom center.

Vous pouvez également utiliser des valeurs négatives. Vous avez votre point (0, 0), l’image peut être positionnée avant ce point avec des valeurs négatives.

Exemple :

div {
  width: 300px; height: 250px;
  border: 2px solid blue;
  background-image: url(background.jpg);
  background-repeat: no-repeat;
  background-position: bottom right;
}

Voici une image qui affiche background-repeat, avec no repeat elle ne sera pas répétée. Une seule fois dans une div de largeur 300 width, hauteur height 250, avec une bordure de 2 pixels bleus tout autour, solid. Cela signifie que la bordure sera en trait plein.

Avec background-position l’image sera centrée horizontalement et à droite sur la verticale.

Fixer l’image de fond/pas de défilement

Souvent vous naviguez sur des sites web où vous avez besoin de vous déplacer avec la barre de défilement parce que le contenu est trop grand pour la page. Et vous avez peut être remarqué que l’image de fond, elle, ne bouge pas, elle reste fixe. C’est la propriété background-attachment qui permet cela.

Vous avez 2 valeurs, scroll ou fixed.

La valeur scroll fait défiler l’image d’arrière-plan avec le contenu de la page.

La valeur fixed vous permet d’avoir le contenu qui défile avec l’image qui reste fixe.

Exemple :

div {
  background-image: url(background.jpg);
  background-attachment: fixed;
}

Sur cet exemple, vous utilisez une image pour le fond de toutes nos div.

Vous pouvez principalement utiliser le background-attachment à fixed pour votre balise body afin d’avoir l’image pour toute la page. Par exemple, dans une div, cette technique peut servir pour ajouter un article de blog.

Conclusion

Il peut être intéressant d’ajouter un arrière-plan sur votre site. Qu’il serve de vitrine, ou juste pour agrémenter votre page, pensez à toutes les options disponibles pour le manipuler.

Rappelez-vous aussi qu’il s’agit d’une image. Donc surveillez sa taille et pensez à l’utilisation sur les appareils mobiles d’une image optimisée.

---

Voila, vous pouvez maintenant briller en soirée …

Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/tous-les-cours

Vous pouvez également nous retrouver sur Youtube :

Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q

Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA