Mercredi 23 juillet 2008
Pour insérer un fond sur nos blogs, on a deux solutions : on met un fond de couleur ou un fond image.
Dans les deux cas, on va utiliser l'attribut background.
Mais voyons les détails ...
Couleur de fond
Pour changer les couleurs de fond d'un conteneur (tout le blog, l'entête, le pied de page, les modules, etc ...) on va utiliser l'attribut background-color que l'on va insérer dans la classe correspondante.
Oui, oui, évidemment que je vais te donner un exemple ... et illustré !
Bon, souviens-toi des classes de la structure globale ... comment ça, t'as oublié ? Pfff ... bon, pour les malades d'Alzheimer et les feignasses (si, si, je t'ai vu !) : allez zou ! Direction le cours de rattrapage sur les classes globales .
En attendant, je reprends pour les autres ...
Alors, admettons que tu veuilles un fond de blog rouge, une entête bleue, un corps de blog orange et un pied de page vert. Je te le déconseille fortement, hein, parce que c'est franchement pas beau ! Regarde :
La règle est donc de rajouter dans le CSS les attributs de couleur.
Lorsque la classe existe déjà, on la modifie. Quand elle n'existe pas encore, on la crée.
Dans notre exemple, la classe body est déjà présente mais les classes #ln sont à rajouter.
body {margin:0px; padding:0px; background-color:#FF0033 ; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#FFF;}
#ln_0 {background-color:#3366CC;}
#ln_1 {background-color:#FF9933;}
#ln_2 {background-color:#00FF66;}
Image de fond
Pour mettre une image de fond, on ne va plus utiliser l'attribut background-color mais background-image.
Ainsi, pour mettre un fond image dans le conteneur du blog (body) à la place du rouge de mon exemple ci-dessus, on va mettre dans le CSS :
body {margin:0px; padding:0px; background-image:url(url de l'image choisie) ; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#FFF;}
L'attribut background-image peut être complété par trois autres attributs (du moins à ma connaissance) :
En bref, si je veux un fond image qui ne se répète pas, qui soit positionné en haut à droite et qui ne défile pas (fixe) dans le corps du blog par exemple (#ln_1), voilà ce que je devrais mettre dans mon CSS :
#ln_1 {background-image:url(url de mon image de fond); background-repeat: no-repeat; background-position: top right; background-attachment; fixed;}
Fastoche, non ? ;o))
Dans les deux cas, on va utiliser l'attribut background.
Mais voyons les détails ...
Couleur de fond
Pour changer les couleurs de fond d'un conteneur (tout le blog, l'entête, le pied de page, les modules, etc ...) on va utiliser l'attribut background-color que l'on va insérer dans la classe correspondante.
Oui, oui, évidemment que je vais te donner un exemple ... et illustré !
Bon, souviens-toi des classes de la structure globale ... comment ça, t'as oublié ? Pfff ... bon, pour les malades d'Alzheimer et les feignasses (si, si, je t'ai vu !) : allez zou ! Direction le cours de rattrapage sur les classes globales .
En attendant, je reprends pour les autres ...
Alors, admettons que tu veuilles un fond de blog rouge, une entête bleue, un corps de blog orange et un pied de page vert. Je te le déconseille fortement, hein, parce que c'est franchement pas beau ! Regarde :
La règle est donc de rajouter dans le CSS les attributs de couleur.
Lorsque la classe existe déjà, on la modifie. Quand elle n'existe pas encore, on la crée.
Dans notre exemple, la classe body est déjà présente mais les classes #ln sont à rajouter.
body {margin:0px; padding:0px; background-color:#FF0033 ; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#FFF;}
#ln_0 {background-color:#3366CC;}
#ln_1 {background-color:#FF9933;}
#ln_2 {background-color:#00FF66;}
|
IMPORTANT ! Respecter bien les classes ! - vous pouvez voir que dans l'exemple, la classe body s'écrit sans rien devant alors que les classes des autres conteneurs commencent par #, on trouve également (pour les modules par exemple) des classes devant lesquelles on met un point (.) - il est également primordial de bien ouvrir et fermer les crochets {} - enfin chaque attribut doit être suivi d'un point-virgule ; OU TROUVER LES CODES COULEURS ? Voici quelques outils trèèèèèès précieux : La palette standard des 216 couleurs Web sur le blog de Francisek Pour les firefoxiens, l'extension ColorZilla (excellent ! ndlr) qui permet de prélever n'importe quel code couleur de n'importe quelle zone dans la fenêtre de votre navigateur. |
Image de fond
Pour mettre une image de fond, on ne va plus utiliser l'attribut background-color mais background-image.
Ainsi, pour mettre un fond image dans le conteneur du blog (body) à la place du rouge de mon exemple ci-dessus, on va mettre dans le CSS :
body {margin:0px; padding:0px; background-image:url(url de l'image choisie) ; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#FFF;}
|
URL ?!??? Kesako ? L'url est l'adresse d'un fichier hébergé sur le web (en l'occurence, il s'agit de l'adresse de votre image qui nous intéresse ici). Pour la récupérer dans l'admin, il faut vous rendre dans l'onglet "Mes documents" ==> "Mes images" et cliquer sur la petite loupe de l'image qui vous intéresse. 
L'url (sur OB) ressemble toujours à http://idata.over-blog.com/.../.../.../ |
L'attribut background-image peut être complété par trois autres attributs (du moins à ma connaissance) :
|
background-repeat background-repeat: repeat; pour que le fond se répète background-repeat: repeat-x; pour que le fond se répète horizontalement background-repeat: repeat-y; pour le fonds se répète verticalement background- no-repeat; pour que le fond ne se répète pas |
|
background-position (uniquement dans le cas où on ne répète pas le fond) background-position: center; image centrée background-position: top; image en haut background-position: bottom; image en bas background-position: left; image à gauche background-position: right; image à droite On peut d'ailleurs les combiner : background-position: top center; image centrée en haut |
|
background-attachment background-attachment: scroll; l'image de fond se déplace avec le texte background-attachment: fixed; l'image de fond reste figée |
En bref, si je veux un fond image qui ne se répète pas, qui soit positionné en haut à droite et qui ne défile pas (fixe) dans le corps du blog par exemple (#ln_1), voilà ce que je devrais mettre dans mon CSS :
#ln_1 {background-image:url(url de mon image de fond); background-repeat: no-repeat; background-position: top right; background-attachment; fixed;}
Fastoche, non ? ;o))
Vos premières réactions à cet article
(Commentaires transférés des anciens locaux de l'atelier)|
je relirai ca un matin car apres le sport et les balade je capte mal , mais sur mike va m'expliquer ca , bise cali
commentaire n° : 2 posté par : mrcafe (site web) le: 23/07/2008 20:19:33
Oh! lala! Cali... je comprends vite mais quand je vois faire...alors là -ma fille-hihi! je nage!
Si jamais tes pas passent un jour à Strasbourg... fais-moi signe encore -hihi- si tu veux !bien sûr!   et bon jeudi
commentaire n° : 3 posté par : sybille--mamybell (site web) le: 23/07/2008
21:29:56
Quelques petites choses à rajouter:
1) La palette de Francisek est vraiment très bien mais difficile à manipuler quand on travaille sur son CSS. Il y a des freeware excellent dont un qui permet aussi de choisir la couleur et le type de police. Il s'agit de Color Mania téléchargeable à l'adresse suivante: -- http://www.blacksunsoftware.com/downloads/ColorManiaSetup.exe --- Il y a aussi ce petit freeware hyper simple et il permet aussi de créer une couleur et d'en avoir le code RVB et hexadécimal; téléchargeable ici: -- http://www.ptorris.com/windows.php#rvb -- chez son créateur. 2) Pour compléter cette panoplie il y a l'excellent ColorZilla qui fonctionne en extension (plugin) de Firefox. Il permet de récupérer le code pour la couleur de n'importe quelle zone de l'écran. Téléchargeable ici: -- http://extensions.geckozone.org/ColorZilla --- Un grand merci à Cali pour toutes ces petites choses qu'il est bon de nous remettre en mémoire et aussi pour sa patience à accepter les digressions et les intrusions de vieux loubards comme un certain alphomega.... Bisous et ne va pas en prendre l'habitude...
commentaire n° : 4 posté par : alphomega (site web) le: 23/07/2008
23:38:32
Tu es pédago toi, non? :) . A+
commentaire n° : 5 posté par : bernard (site web) le: 24/07/2008 05:52:51
Mais c'est avec grand plaisir que tu peux insérer les infos du com. Le but c'est que le "design" avance..
Bonne soirée
commentaire n° : 6 posté par : alphomega (site web) le: 24/07/2008
18:51:47
J'ai une autre astuce pour récupérer les codes couleur : je vais sur GrSite, je choisi un type de fond (peu importe lequel), puis je choisi l'option "change the color, method 2".
La tu arrives sur une palette de couleur, et tu peux avoir accès à des centaines de nuances par couleur !! Ne pas tenir compte de leur effet sur le fond choisi, ça n'a rien à voir avec le rendu "pur". Je fais tout le temps comme ça, ce qui me permet d'avoir par exemple exactement la même nuance de vert pour un texte que celle de l'image placée à côté par exemple. Ca a l'air compliqué, dit comme ça, mais en fait, c'est super simple ! Gros bisous Cali !
commentaire n° : 7 posté par : Didou (site web) le: 24/07/2008 21:21:16
A chacun sa méthode ! ;o))
Lorsque j'ai débuté en CSS, j'ai découvert le tableau de Francisek qui m'a bien rendu service, c'est la raison pour laquelle, je l'ai proposé dans ce billet. Maintenant, je récupère mes codes couleurs (pour assortir les couleurs de police à un fond par exemple) directement dans mon logiciel de retouche d'images quand je traite celles-ci. Si tu es Firefoxienne, je te conseille vivement l'extension dont parle Alphomega dans son commentaire. Je l'ai installé ce matin, c'est une pure merveille ! Bonne soirée Didou Bisous
réponse de : Cali (site web) le: 24/07/2008 21:44:59
J'ai commencé à bidouiller sur un blog test pour les fonds , je crois que c'est rentré , je me demande si j'aurais pas dû enregistrer le CSS dans un bloc note avant toute bidouille
:)
Et pour changer les fond des modules Box , c'est dans box-content qu'on met le fond , je sais je veux aller vite :) Bisous Calinette
commentaire n° : 8 posté par : Urban
 (site web) le: 25/07/2008 18:47:12
Tu n'as pas besoin de l'enregistrer, après tes essais, quand tu voudras revenir au design de base, il te suffira de copier/coller le CSS original (dans l'onglet du même nom).
réponse de : Cali (site web) le: 25/07/2008 19:48:13
J'avais déjà commencé à tripoter mon CSS pour faire des trucs dégoutants (lol) mais j'ai surtout appris en répérant des choses ici et là.
Merci pour ces leçons que je suis avec assiduité. Cela change des conseils (sympas et intéressants d'ailleurs) où on te donne une marche à suivre fixe. Avec toi, on comprend ce qu'on fait. Tu pourras aussi donner des liens vers des bordures, textures, etc.... Merci.
commentaire n° : 9 posté par : Heureuse (site web) le: 28/07/2008 00:15:34
J'arrive toujours à suivre...mais loin derrière ;)
Tu as eu une riche idée de créer ce site. Gros bisous, Calinou
commentaire n° : 10 posté par : siratus (site web) le: 31/07/2008
10:27:57
je vais me ranger sagement au fond de la classe, près du radiateur et en attendant que ça passe, je ferai des cocottes en papier
bisous
commentaire n° : 11 posté par : ginette (site web) le: 11/08/2008 11:22:42
Ca y est, grace à toi j'ai mis des petits galets sur le fond de mon blog, mais alors c'est pas facile du tout... En tout cas MERCI, et c'est pas fini je compte bien continuer !
commentaire n° : 12 posté par : Ghany/Catherine (site web) le:
14/08/2008 22:52:43
Pour voir la vie en plus rose, et voir si l'herbe du voisin est plus verte j'ai dégotté quelques outils sympas et pas chers (puisque gratuits). Des petites merveillesdans leur genre
avec le gros avantage sur ColorZilla que je proposais c'est que la pipette fonctionne sur tout l'écran.
Les liens de téléchargement: http://www.zdnet.fr/telecharger/windows/fiche/0,39021313,22009823s,00.htm = slugs colour picker (anglais) http://www.clubic.com/lancer-le-telechargement-26234-0-la-boite-a-couleurs.html = la boîte à couleurs (français) Les deux premiers peuvent être complémentaires avec une préférence pour "slugs" http://www.clubic.com/telecharger-fiche69364-vmn-toolbox.html = vmn toolbox (français, outils en anglais) l'intérêt ce sont les règles de mesure assez géniales L'inconvénient de celui-ci c'est qu'il installe aussi la barre yahoo (une plaie)
commentaire n° : 13 posté par : alphomega (site web) le: 20/10/2008
23:36:29
|
Accueil
Menu
 Aide CSS Outils Gadgets Ressources graphiques Mes designs : La FAQ de l'atelier : pour vos questions et conseils
|
| Contact |
|
Me contacter par e-mail |
| Lien |
Lien vers l'atelier : tu as installé un de mes designs sur ton blog et/ou tu veux
faire découvrir mon blog en mettant un lien vers l'atelier ?
Un clic pour afficher le logo en taille réelle, puis clic droit ==> enregistrer sous ...
|
Bon début de soirée calinette
P.S. : C'est quoi un irlandien , je ne connais pas :-D