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

    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

    En effet! Merci Ă  toi pour la prĂ©cision technique 🙂

  • Kobe Bryant Shoes | 2010/07/08

    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

    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

    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