BACKGROUND : TECHNIQUE DE BASE CSS

css background image

La bonne vieille propriété background est un des éléments principaux avec lequel nous pouvons jouer pour modifier le design de notre site web.

Vous trouverez dans le billet suivant, un survole des quatre approches les plus courantes pour styliser l’image de background de votre «body» de page web.

Si vous débutez dans le design web, vous trouverez également quelques techniques CSS de bases à mettre en pratique pour vos prochains sites web.

ARRIÈRE-PLAN D’UNE SIMPLE COULEUR

Example of a single colour background

body {
	background-color: #a1bad1;
}

RÉPÉTER UNE IMAGE DE «BACKGROUND»

Pattern de background

Exemple de background répété

body {
	background-color: #a1bad1;
	background-image: url(images/pattern.png);
}

Par défaut, une image d’arrière-plan se répétera à l’horizontale et à la verticale, alors, vous n’aurez pas besoin de définir cette propriété dans votre CSS.

Même si une image de fond répétée couvre toute la surface de votre page web, vous devez toujours définir une couleur de fond, au cas où l’utilisateur n’aurait pas permis l’affichage d’images dans son navigateur. Personnellement, je n’ai jamais vu quelqu’un naviguer d’une telle façon, mais il s’agit d’une bonne habitude à prendre.

IMAGE DE «BACKGROUND» SE RÉPÉTANT SEULEMENT À L’HORIZONTALE

Exporter un dégradé pour le background

Exemple d'une image répétée à l'horizontale

body {
	background-color: #a1bad1;
	background-image: url(images/gradient.jpg);
	background-repeat: repeat-x;
}

Une image de «background», en CSS, peut être répétée, si vous le désirez, seulement sur l’axe des X (horizontalement) ou sur l’axe des Y (verticalement). La propriété repeat-x est fréquemment utilisée afin d’ajouter un dégradé sur un élément web, comme un bouton. Une petite image très mince peut être définie comme image d’arrière-plan pour le body, qui, lorsque répétée, s’élargira sur toute la surface de la page.

Par défaut, l’image se positionnera dans le haut de la page, mais les valeurs center ou bottompeuvent également être définies. La couleur d’arrière-plan devrait être choisie selon la couleur située au bas de votre image de fond, pour ainsi permettre une transition parfaite entre l’image et la couleur de «background».

UTILISATION D’UNE GRANDE IMAGE COMME ARRIÈRE-PLAN

Exporter une large image de fond

Exemple d'une large image de «background» positionnée au centre

body {
	background-color: #a1bad1;
	background-image: url(images/bg-image.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}

À noter que vous pouvez également déclarer les propriétés comme suit :

body {
	background: #a1bad1 url(images/bg-image.jpg) center top no-repeat;
}

Le fond d’une page web ne doit pas nécessairement être une petite image qui se répète, il peut aussi s’agir d’une grande image graphique. Bien que le poids d’une telle image sera plus élevé que la technique du «repeat», une bonne compression de votre image peut très bien faire le travail.

Peu importe la largeur de l’image que vous utiliserez, les images de «background» n’influence pas l’utilisation de la barre déroulante («scroll bar») du fureteur. Plus la fenêtre du navigateur sera large, plus l’utilisateur verra l’image de fond.

2 réponses à “BACKGROUND : TECHNIQUE DE BASE CSS

Les commentaires sont fermés.