Passer une image en fond de blog
Un anonyme m'a demandé comment mettre une image en fond de page sur blogger, et ma réponse refuse de passer en commentaire (trop de code). Je vais donc tenter de lui répondre ici.
Ce n'est pas tout simple :
Il faut aller dans "modèle" "modifier le code html" chercher la phrase :
body {
background:
qui se trouve à la fin des
/* Variable definitions
Ensuite il faut avoir l'image que l'on veut en fond hébergée quelque part (chez flickr par exemple).
On récupère l'adresse internet de l'image (cette adresse doit se terminer par .jpg ou .gif) et on colle cette adresse dans le code à la suite de :
body { background:
en la plaçant dans le code html suivant :
url("ici ce trouve l'adresse de l'image") repeat; margin:0;
Si je voulais mettre ce dessin de mon fiston en fond (par exemple)
J'héberge le dessin sur flickr, je récupère son adresse en faisant un click droit et view image (dans ce cas c'est "http://farm3.static.flickr.com/2163/1770862049_718489f2d7_o.jpg")
et j'intègre cette adresse dans le code html :
body { background:url("http://farm3.static.flickr.com/2163/1770862049_718489f2d7_o.jpg") repeat; margin:0;
J'obtient ça :
Voila, désolé de ne pas pouvoir expliquer ça plus simplement.
Bonne journée
Ce n'est pas tout simple :
Il faut aller dans "modèle" "modifier le code html" chercher la phrase :
body {
background:
qui se trouve à la fin des
/* Variable definitions
Ensuite il faut avoir l'image que l'on veut en fond hébergée quelque part (chez flickr par exemple).
On récupère l'adresse internet de l'image (cette adresse doit se terminer par .jpg ou .gif) et on colle cette adresse dans le code à la suite de :
body { background:
en la plaçant dans le code html suivant :
url("ici ce trouve l'adresse de l'image") repeat; margin:0;
Si je voulais mettre ce dessin de mon fiston en fond (par exemple)
J'héberge le dessin sur flickr, je récupère son adresse en faisant un click droit et view image (dans ce cas c'est "http://farm3.static.flickr.com/2163/1770862049_718489f2d7_o.jpg")et j'intègre cette adresse dans le code html :
body { background:url("http://farm3.static.flickr.com/2163/1770862049_718489f2d7_o.jpg") repeat; margin:0;
J'obtient ça :
Voila, désolé de ne pas pouvoir expliquer ça plus simplement.
Bonne journée
bonjour c'est encore moi!je voudrais savoir quel modele vous choisissez avant de faire ca ?
RépondreSupprimeret comment faites vos pour tout etaler sur la page? pour ue tout ne soit pas regroupé au milieux?
J'étais partit d'un modèle compliqué mais j'imagine avec la version minima ça devrait fonctionner. Si ça reste concentré au centre c'est que la maquette de base à un tableau en haut de page. Il faut faire des essais avec différents modèles jusqu'à ce que ça fonctionne.
RépondreSupprimerWoohoo! ca marche! regardez ( http://gasp-drawing.blogspot.com/ ) le seule probleme c'est le modele et c'est seulement avec lui que j'ai reussi!
RépondreSupprimerC'est super Gaspard :)
RépondreSupprimerLe modèle, je le trouve très bien. Il faudrait juste mettre, pour mieux mettre les dessins en valeur, le fond en blanc et ça, c'est facile, pas besoin de passer par les codes.
Heberger ton image sur flickr va à l'encontre de leurs cgu. Par contre, tu peux héberger ton ou tes images dans un billet sur blogger, billet que tu conserve en brouillon.
RépondreSupprimerCgu ? Conditions générales d'utilisation ?
RépondreSupprimerSinon, merci du tuyau, j'avais bêtement pas pensé à cette solution :)
Ce commentaire a été supprimé par l'auteur.
RépondreSupprimerOui, CGU, y'a que par chez moi qu'on le dit ? Possible :)
RépondreSupprimerEn fait il s'agit de TOS chez flickr, pardon pardon :) Term of service.
Autrement appellés toujours chez flickr mais sur une autre page CG (Community Guidelines). C'est écrit là où tu peux obtenir le lien sur tes photos en pleine taille : "Remember! Flickr Community Guidelines specify that if you post a Flickr photo on an external website, the photo must link back to its photo page."
Bon, mais si c'est la règle, je n'ai jamais vu de représailles à l'encontre des contrevenants, étant moi même parfois de ceux là :). chuuut :)
Bonjour,
RépondreSupprimerMerci pour votre expliaction
j'aimerai faire comme sur votre blog.
uniquement l'image de fond en dehors du cadre.
quand je change le code que vous avez donnez je me retouve avec le dessin de fond sur toutes ma page.
Or je veux que celui-ci soit uniquement que les cotés.
Sinon c'est impossible de lire le texte
Merci encore
Bonjour Rascal,
RépondreSupprimerTon problème vient de ce que la colonne centrale de ton blog n'a pas de fond, et ça… je sais pas trop comment y remédier. Il faudrait que tu cherche dans le code html si tu as : #outer-wrapper {
et sous cette ligne, tu ajoute :
background:#FFFFFF; (si tu veux du blanc, sinon c'est # plus le code html de la couleur que tu veux)
Là, normalement, la colonne centrale change de couleur.
Après, chaque colonne a son petit nom (sur mon blog, la colonne de droite se nomme : #sidebar-wrap {) et il te suffit de faire la même opération, c'est à dire ajouter background:# plus le code de la couleur.
J'espère que tu vas t'en sortir :)
Bonjour ! j'ai suivi tout ces conseils, mais mon fond ne bouge pas, il reste blanc...
RépondreSupprimerje pense peut être avoir a changer quelque chose dans les couleurs et les polices (puisqu'ils me disent couleur du fond : blanc) mais je ne sais pas comment faire !
Merci !
ps: voilà mon code:
body {
background:url("http://www.casimages.com/img.php?i=090102011954504561.jpg")
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;
margin:0; color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Bonjour Magali,
RépondreSupprimerdéjà, l'URL de ton image est mauvaise. Tu renvois sur la page ou il y a ton image, pas sur ton image.
L'URL de ton image est :
http://nsa03.casimages.com/img/2009/01/02//090102011954504561.jpg
Déjà, ça devrait mieux fonctionner.
Ensuite si tu veux que ton fond se repete, il faut retirer no- devant repeat.
Toute la partie sur la position de l'image me parait aussi étrange, et a priori inutile.
Essai de mettre ça à la place exacte de ton code (j'ai mis l'URL de ton image), j'espère que ça marchera :
body {
background:url("http://nsa03.casimages.com/img/2009/01/02//090102011954504561.jpg ")
background-repeat:repeat;
margin:0; color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
Et… bonne année :-)
Au fait, j'ai remarqué que ton image était très grande. Du coup elle sera très longue à charger. Tu devrais la réduire (un petit carré de 50 ou 80 pixel c'est très bien). Le carré va ce répéter et donner l'impression de fond.
RépondreSupprimerDéjà merci beaucoup pour ces réponses.
RépondreSupprimerJ'ai donc essayé d'abord avec l'autre url, et même avec d'autres; rien ne se passe.
J'ai ré-essayé en changeant la taille de l'image, toujours rien, le fond reste blanc...est-ce dans les paramètres du modèle de blog ? j'ai pris le minima tout simple blanc...
Pourtant sur un autre blog que j'avais fais j'y étais arrivé, je ne sais juste plus comment :S
Et bien la, je ne sais pas. j'ai essayé ton image en fond sur mon blog et ça fonctionne, ce n'est donc pas l'hébergeur de l'image qui empêche la modif.
RépondreSupprimerEssaye en virant la ligne
background-repeat:repeat;
et, à la place tu mets juste ça (avec le repeat à la fin)
body {
background:url("http://nsa03.casimages.com/img/2009/01/02//090102011954504561.jpg") repeat;
Quand j'ai fais l'essai avec la ligne backround-repeat chez moi, ça n'a pas fonctionné non plus. Avec la nouvelle ligne que je t'ai mise, ça fonctionne.
Tu me tiens au courant.
Oui ça marche !!
RépondreSupprimerMerci beaucoup :) !
En passant j'ai visité votre blog, je l'aime beaucoup ! Il est diversifié, intéressant, pas trop chargé en écriture, les sujets sont intéressants, non vraiment j'aime beaucoup ! Je repasserai!
Merci encore !
Et bonne année à vous aussi !
Ah, c'est une bonne nouvelle !
RépondreSupprimerEt merci pour les compliments :-)
C'est encore moi je suis navrée ... j'aimerai mettre le fond de mes article en blanc...il est pour le moment transparent.
RépondreSupprimerOù dois-je insérer la balise #FFFFFF (si je dois bien faire ça ?!)
Désolé pour toutes ces questions !
Aie, là, je n'ai pas la réponse. J'ai cherché pour le blog de mon fils et je n'ai jamais trouvé la réponse. En presévérant je suis sur que c'est possible, mais ça doit être dans les styles CSS (les lignes de code du début) et c'est plus complexe.
RépondreSupprimerDésolé.
Si tu veux vraiment un fond, tente avec différents modèles. Moi j'avais pris un modèle compliqué et tout viré petit à petit pour arriver à ce que je voulais.
Bonne journée
D'accord ça n'est pas grave ! merci beaucoup :)
RépondreSupprimerMERCI! merci!merci! ca fait je ne sais combien de temps que je cherche et grace a vous j'ai reussi du premier coup! merci
RépondreSupprimerAurelie
De rien :-)
RépondreSupprimerMerci pour ce billet, m'a bien aidé à réorganiser mon blog, j'ai pas encore tout à fait fini mais j'm'accroche...
RépondreSupprimerPour Magali, si tu veux faire apparaitre un fond uni derrière le texte tu tapes: "background:#FFFFFF;"
juste après la ligne: "#outer-wrapper {"
Ca a marché pour moi, bon courage...
en tout cas, stylé et informatif ce site et en plus c'est un tepo de Vegas, dingue :)
J'ai suivi pas à aps tout vos conseils, mais pas moyens d'y arriver... (hé msieur, je vous jure hin! jai bien tout fait, dans l'ordre, en réessayant à plusieurs reprises, niet, mon fond me montre toujours ses fesses blanches... Il m'en veux, peut etre)
RépondreSupprimerMon code:
body {
background:url("http://www.casimages.com/img.php?i=090731045035436205.jpg ")repeat;
margin:0; color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Bonjour !
RépondreSupprimerJ'ai vraiment essayé de suivre ce que vous expliquiez ! Mais ma page est malheureusement toujours blanche, rien ne change et je suis vraiment a deux doigts de craquer !
Mon image est la suivante :
http://www.casimages.com/img.php?i=091207101120937459.jpg
Don, si j'ai bien suivi vos conseils, ca me donne (normalement) cela :
body {
background:url
("http://www.casimages.com/img.php?i=091207101120937459.jpg") repeat;
Mais ca ne marche toujours pas !
Aidez-moi svp, je suis un cas désespérée ! :(
Bonjour Lou, en fait, l'adresse de votre image c'est :
RépondreSupprimerhttp://nsa11.casimages.com/img/2009/12/07/091207101120937459.jpg
Et non :
http://www.casimages.com/img.php?i=091207101120937459.jpg
qui est l'adresse de la page ou se trouve votre image.
En plaçant cette nouvelle adresse, ça devrait marcher… enfin, j'espère :-)
Vous pouvez aller voir sur mon blog, j'ai des fonds d'écran spécial Blogger.
RépondreSupprimerVoici l'adresse : http://artsdco.blogspot.com/