Mettre une image de fond sur le blog

Devant tant d'interrogation, et parceque ça commence a faire longtemps que je doit le faire, voici une première partie du.....

Tuto de Canalblog.

Pour commencer on va apprendre comment passer en mode avancé et mettre une image de fond sur le blog au lieu d'une couleur.

Passer en mode avancé:

Tout d'abord, il faut que votre blog soit en "mode avancé", dans "Apparence" cliquez sur "Parametre" et ensuite cocher "Convertir ce modèle en type avancé" (attention, opération irréversible).

Je vous conseil donc de partir d'un nouveau model : Editer un nouveau modèle et refaite le blog à l'identique par exemple, après on peut tout faire mais choisisez le nombre de colonne, les blocs que vous voulez, l'album et tout, parceque si c'est pas déjà fait, si vous voulez les rajouter en mode avancé, c'est possible mais c'est relou!!! Bref refaites votre le blog comme vous le voulez un mode normal, histoire de pas perdre l'apparence de votre tout joli bloggounet, parceque une fois en mode avancé, on peut pas revenir en arrière mais croyez moi, une fois que vous connaitrez les secrets du mode avancé qui, je vous l'accorde peut faire un peu peur, vous n'aurez plus envie de revenir au mode normal car on peut tout faire avec!!!!!

Donc une fois en mode avancé vous n'avez plus dans "apparence" les pages  "Style" "Apparence générale" et "Blocs" mais à la place "éditer les fichiers de ce model" et ce qu'on va faire!!!

Donc un fois que vous editer les fichiers vous arriver dans le code, la matrice en quelque sorte de canalblog!
Avant de commencer je vais quand même vous expliquez non pas le code, on verra ça au fur et à mesure, mais a quoi correspond les diffèrentes "pages", je sais c'est chiant mais ça vous permettra dejà de mieux comprendre le code et donc à quoi correspond et où s'affichera toutes les connerie que vous allez faire:

Page d'accueil: C'est la que vous arrivez en premier, les autres page sont à selectionner dans le menu déroulant. Cette page d'accueil c'est la page que tout le monde vois en arrivant sur le blog.

Page des archives: C'est la page qui s'affiche quand quelqun clic sur une catégorie par exemple, ou se balade dans vos anciens messages avec "page suivante".

Page de l'index des archives: Bah son nom l'indique c'est la page d'index des archives où on arrive quant on clic sur "toutes les archives".

Page d'un message: C'est la page qui s'affiche quant on ecrit un commentaire par exemple.

Page du profile d'un auteur: C'est la page de "comme son nom l'indique", où on arrive quant on clic sur la photo de l'auteur où y'a votre description à la con.

Page de présentation d'un album: C'est là qu'est votre album photo, et c'est la page qui s'affiche quand on clic sur l'album photo.

Page d'une photo: C'est la page qui s'affiche quand on clic sur une photo dans l'album.

Feuille de style générale: Ah celle ci est importante. Vous remarquerez qu'elle est assez difèrentes des autres page de code, parceque elle renvois pas à un "espace de votre blog" mais a son style c'est à dire que c'est ici que vous pourrez changer, les largeurs des colonnes, du contenu, des bordure, les couleurs des fonds de tout ca, les  ploices et leurs couleur enfin tout ça quoi vous voyez. Ca reprend en faite la page  "style" dans le mode normal. Vous suivez?


Donc a ce stade là, on a encore rien toucher (mais ça ne saurai tarder) si ce n'est qu'on est dans le mode avancé. Mais déjà je suis sur que ces page de codes vous font un peu moins peur maintenand qu'on a fait connaissance!!!!

Donc voici ce qu'on va faire pour cette première leçon les enfants:

Mettre une image de Fond sur votre joli blog:

Alors intero surprise: A votre avis c'est où qu'on va faire ça?........Dans la "feuille de style général", c'est bien le leche-cul bigleu du premier rang. Alors on y va!

Avertissement important: Avant toute manip dans n'importe quelle page, si je peux vous donner un petit conseil, copier dans un document tout le code d'origine, comme ça si vous faites une connerie, ce qui arrivera surement c'est comme ça qu'on apprend, vous pourrez toujours revenir en arrière. A la limite copier toutes les pages quelque part avant de faire quoi que ce soit comme ça vous etes sur de pouvoir revenir au départ en recollant votre code d'origine. Mais c'est qu'un conseil!

Donc dans la "feuille de style générale", le debut du code doit etre a peu pres comme ca:

body {
    margin: 0px 0px 0px 0px;
    text-align: center;
    background-color: #9C5E8A;
}

"#9C5E8A" ça c'est le code de la couleur de votre fond de blog. Et c'est donc ici qu'on va agir pour mettre votre fond. Mais avant on fait durer un peu le suspense!

Un petit conseil: Pour mettre des images sur le blog, il faut qu'elle est une URL et donc qu'elle soit "hebergée" quelque part sur le net. Alors pourquoi demander à canalblog de le faire pour nous?! (vous pouvez mettre tout chez un autre hebergeur aussi, free au hasard, l'important c'est d'avoir une URL)
Voici donc une petite astuce qui marche bien pour les fichiers pas trop gros 2MO max je crois. Vous postez l'image que vous voulez mettre en fond dans un message en "brouillon", Canalblog va la gardée en mémoire et vous la retrouverez (ainsi que son URL) en allant dans "Outils" et en haut dans "gestion des fichiers", vous cliquez dessus dans la liste et dans votre navigateur vous avez son URL qui doit être du type: https://storage.canalblog.com/42/27/220736/8802014.jpg

Donc on en viens enfin a ce qui vous interesse, mais toutes c'est explications vont vous servir, vous verrez! Donc une fois que vous avez de quelque manière que ce soit récuperer l'URL de votre image de fond on va changer le code dans la feuille de style, et pour cela on deux manière de faire. La première marche bien pour Firefox et permet d'afficher l'image en "étirer" il me semble, de choisir que votre image défile (ou pas) en même temps  qu'on descent dans le blog, mais ne fonctionne pas sous IE.

La seconde manière sous FF et IE, mais par defaut c'est "fixed" et répéte l'image en mosaique par defaud. A vous de voir faites des tests. Bon peut etre que y'a moyen de modifier tout ça mais je me suis pas vraiment penché, si quelqu'un en sait plus je suis preneur!

Première manière:

Remplacez :

body {
    margin: 0px 0px 0px 0px;
    text-align: center;
    background-color: #9C5E8A;
}

Par

body {
    margin: 0px 0px 0px 0px;
    text-align: center;
    background: #9C5E8A url("le nom de l'url de votre image, style https://storage.canalblog.com/.......jpg") Après vous pouvez aussi ajouter fixed pour que l'image reste fixe, et finissez par ;
}

Deuxième méthode:

Remplacez:

body {
    margin: 0px 0px 0px 0px;
    text-align: center;
    background-color: #9C5E8A;
}

par :

body {
    margin: 0px 0px 0px 0px;
    text-align: center;
    background-image: url("le nom de l'url de votre image, style https://storage.canalblog.com/.......jpg");background-no-repeat:repeat-y, repeat-x;
}

Et voila le tour est jouer!!!!!C'est tout pour aujourd'hui est c'est dejà pas mal!

Si vous avez des questions n'hésitez pas, et d'autre poste viendrons dans cette nouvelle catégorie pour faire 'autre trucs!!!!. Si vous avez aussi des suggestions ou des demandes précises, postez vos commentaires!!!

Comments

[CZ]

Mais je t'en pris montre moi ce dont tu es capable mon gillou le concours n'est pas fini!
[bol]

[Giloose ,cassé]

Le zombie?...Heu disons que le travail des couleurs est pas mal[bien]

Mais y a encore un peu de boulot au niveau des compétences de réalisations [join]

[CZ]

Non t'inkiet je la supprimerai pas d'autant que y'a plein de gens qui traine sur le net et qui cherche ces info qui passe par ici, c'est souvent dans les motclé qui font entrer chez CZ!
Sinon qu'est tu pense de mon Zombie?
Dit Dit Dit tu m'en fait un de Zombie?!
Et tu pourrai passer ici pour me donner autre chose que des ordres!

[Giloose ,bourré]

Juste pour dire un truc:
Ne m'éfface jamais cette rubrique car, elle est ma scource de référence et mon pense bête afin de travailler mon css!
On comme on dit dans le milieu:
"Si tu zap le css, t'est HS!"
[gor]
Merci ma poule pour tes cours...+que nickel yo!

[Crevette]

Tinkiet je m'occupe de ton truc, dès demain matin! Si t'es en vacances on pourra même le faire ensemble par MSN! On va essayer de ratrapper le truc au pire tu refera une "apparence" ça va etre vite fait tu va voire t'as pas grand chose à faire, mais avant on va essayer de rattraper le coup!
Et bona nez! A tus!