3. Le fond de fenêtre

Par Lomalarch le lundi 8 octobre 2007, 16:46 - Personnalisations - Lien permanent

Sauf si vous avez choisi une largeur fluide à 100% pour l'affichage du blog, un fond apparaît sur les côtés. On peut habiller ce fond avec une couleur uniforme, un motif répétitif ou, pourquoi pas, une couleur à gauche et une autre à droite.

Contenu de cet article :

Pour changer la couleur du fond de page ou y appliquer une image qui se répète, tout se passe dans la règle de body :

body {
	font : 86%/130% arial,"Lucida Grande","Trebuchet MS", sans-serif;
	background : #f0f0f0;
	color:#222;
    }

Un fond de fenêtre de couleur uniforme…

La ligne background : #f0f0f0; détermine actuellement un fond uniforme de couleur gris pâle. Pour modifier cette couleur il suffit d'indiquer le code hexadécimal correspondant à la couleur souhaitée. De nombreux sites permettent de choisir des couleurs, quelques-uns d'entre eux sont listés parmi les liens Dotaddict.org. Exemple pour un fond bleu clair :

	background : #cce0f0;

En voici le résultat :

exemple avec fond #cce0f0

… ou avec un motif répétitif

Pour un motif répétitif, placer l'image de ce motif dans le répertoire /kit2/images/ puis modifiez la ligne background ci-dessus de la façon suivante :

  	background : #f0f0f0 url(images/fond_motif.gif);

En voici le résultat :

exemple avec motif de fond

Et pourquoi pas bicolore ?

Si vous souhaitez que la couleur « débordant » de la page ne soit pas la même à gauche et à droite, procédez comme suit :

  1. fabriquez une image de 1600px de large et quelques pixels de haut avec une couleur sur la moitié gauche et une autre sur la moitié droite
  2. placez-la dans le répertoire /kit2/images/
  3. remplacez la ligne de background par :
  	background : #f0f0f0 url(images/fond_bicolore.png) top center;

En voici un exemple :

exemple avec image de fond bicolore

Sur le même principe de construction et de placement vous pouvez utiliser des motifs différents à gauche et à droite, etc.

Les images fond_motif.png et fond_bicolore.png sont disponibles dans le répertoire zegoodies.

Commentaires

1. Le jeudi 31 juillet 2008, 04:23 par jeep

1) Pourquoi imposer des marges de chaque coté? on ne personnalise plus?

2) Pourquoi une image de 1600px et les resolutions de 1700 et plus alors ainsi que les 800 ou l'image disparait?

Ne preconisez pas svp de mauvaises techniques de travail

2. Le mardi 30 septembre 2008, 01:53 par Pep

Toutes les critiques sont bonnes à prendre, encore faut-il qu'elles soient vraiment constructives.
Que proposez-vous donc pour corriger les soucis que vous mentionnez ?

3. Le lundi 24 novembre 2008, 09:25 par nblparis

Bonjour, merci pour toutes ces infos, mais comment fait-on si on veut faire apparaître une ombre portée sur la couleur de fond (comme si le blog était une plaque blanche posée sur un fond de couleur) ?
exemples : lefigaro.fr, depresdeloin.fr, etc.

Merci !

4. Le mardi 16 décembre 2008, 18:46 par fred

Ok ca roule.
J'ai rattrapé les premières étapes, choisi ma trame, les goûts de couleurs.

On passe à la suite ?

:D

5. Le mardi 17 février 2009, 01:25 par Bob

Bonjour

Ce kit va t-il être finalement téléchargeable ?

6. Le dimanche 5 avril 2009, 23:39 par Claire Latxague

Bonjour,
Je cherche à mettre une photo en fond de page sur Kit 2 et je n'y arrive pas. Et surtout je ne sais pas où trouver les explications pour le faire. Pourriez-vous m'aider ?
Merci d'avance