Blog inspirant depuis 2008
  • Pin It

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.

« Le billet suivant est une traduction d’un article paru sur le site web de Line25.com écrit par Chris Spooner ».

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 bottom peuvent é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.

5 commentaires

  • Bouclette | 2010/05/25

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Je précise juste que si on utilise un petite image (La « petite image mince qui se répète à l'horizontale ») ça ne sert à rien qu'elle fasse plusieurs pixels de large, 1 seul suffit 🙂 C'est plus léger.

  • Louis-Philippe Dea | 2010/05/25

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    En effet! Merci à toi pour la précision technique 🙂

  • Kobe Bryant Shoes | 2010/07/08

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    New blazing creative enough is in, old enough naturely was out, No wonder people are thinking hardly to find inspiration everyday, and fashion will never stop, this creative can not just closing slightly!Here some sites about fashion essentially.Nike Zoom LeBron James Soldier

  • dior handbags | 2010/07/08

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    I think life is simple and comfortable, so the decorate at my home is very concise. This is also my character, my life is like this, these simple store are my favorite. Nike air Zoom Lebron soldier IV

  • lueurs | 2013/05/13

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    bonjour,
    j’ai parcouru vos conseils et astuces avec beaucoup d’intérêt ; je voulais avoir juste avoir votre avis sur 1 question :
    j’ai effectué ce site à l’origine avec word, tous les mois j’avais environ 1000 visites, et voilà que depuis 2 mois, çà redescend à 300 ; j’ai toujours refusé de mettre de la pub, car je ne vends rien. merci d’éclairer ma lanterne, et bravo pour votre revue, lueurs champêtres.

Laisser un commentaire