Personnaliser l'arrière-plan du site

Même quand on a choisi un template prédéfini avec Jimdo, il est possible de personnaliser l'arrière-plan du site avec une autre image que celles qui sont proposées dans Style. On peut ainsi mettre une image de sa fabrication, une photo ou un fond téléchargé sur un site de création graphique.

 

Ce tutoriel s'articule en 3 temps :

  • Etape I : on recherche, on télécharge, on génère ou on dessine son arrière-plan
  • Etape II : on charge l'image retenue sur son site
  • Etape III : on insère le code CSS qui va bien dans le header

Pour ceux qui voudraient compléter leurs connaissances sur le sujet, j'ai ajouté une modeste revue de liens à la fin du tutoriel.

I. Recherche ou conception du fond

Générateurs en ligne

Ca arrive, patience... ;-)

Galeries de wallpapers et de textures

Ca arrive, patience... ;-)

Flèche vers le haut

II. Chargement de l'image

Je vous propose 3 méthodes pour charger votre fond personnel sur votre site :

  • la méthode 1, simplissime, est recommandée aux très grands débutants et aux pressés !
  • la méthode 2, simple et propre, s'adresse aux débutants
  • la méthode 3, plus complexe mais aussi plus élégante en termes de code, conviendra aux utilisateurs plus avancés

Méthode 1 : simplissime et expéditive

Après avoir trouvé l'image ou la photo qui servira de fond, on la charge chez un hébergeur d'images gratuit, comme Imageshack ou Photobucket. On récupère le lien de l'image donné après son transfert et on le copie-colle pour s'en souvenir. Il sera de ce genre :

http://img218.imageshack.us/img218/5130/fond.jpg

On peut alors passer à l'insertion du code.

Flèche vers le haut

Méthode 2 : simple et propre

Après avoir trouvé notre fond, on va créer dans le menu de navigation une nouvelle page nommée Cache sur laquelle on va insérer l'image et qu'on va rendre invisible aux yeux des visiteurs en cliquant sur l'oeil :

Screenshot : création de la page invisible
Création de la page cachée
Screenshot : vue du menu
Côté admin, la page est barrée

Sur cette page Cache, on ajoute un bloc + Image correspondant à l'image de fond :

Screenshot : ajout de l'image
Ajout de l'image de fond

Quand le fond est inséré sur la page (et donc chargé sur le site), on fait un clic droit sur l'image pour récupérer son adresse de stockage. Selon les navigateurs, le menu contextuel qui s'affiche au clic droit diffèrent. Avec Firefox, on clique-droit et on sélectionne Copier l'adresse de l'image. On colle l'adresse dans un fichier texte provisoire pour la mémoriser.

Screenshot : récupération de l'adresse
On récupère l'adresse de l'image

Le fond est stocké à une adresse de ce type :

http://votresite.jimdo.com/s/cc_images/cache_1341853550.jpg?t=1240164328

On peut alors passer à l'insertion du code.

Flèche vers le haut

Méthode 3 : complexe, mais élégante

Pourquoi s'embêter à appliquer la méthode complexe quand il en existe deux autres beaucoup plus simples, me direz-vous ? Parce que les 2 autres méthodes, pour simples qu'elles soient, présentent des inconvénients que la méthode 3, elle, n'a pas :

 

  1. Le reproche qu'on peut faire à la méthode 1, c'est que l'arrière-plan est stocké chez un autre hébergeur et que cela peut ralentir le chargement de la page (le temps que le site Jimdo envoie une requête vers le site tiers et rapatrie l'image... )

  2. L'inconvénient de la méthode 2 est double : d'une part, comme l'image est stockée par Jimdo et que ce dernier ne gère pas la transparence .png, on ne peut pas mettre d'images .png transparentes en arrière-plan. Or, ce format est plus joli et plus fin que son équivalent .gif ; c'est donc dommage de s'en priver. D'autre part, Jimdo retaille et compresse les images qu'on y met, de sorte que notre fond peut être dégradé après son chargement en ligne, surtout s'il est de grande taille.

  3. Les avantages de la méthode 3 se déduisent des inconvénients que posent les deux autres méthodes et qu'elle n'a pas... puisqu'avec elle :
  • le fond est hébergé sur le site, pas ailleurs
  • on peut charger des images .png transparentes
  • les images sont chargées dans le répertoire telles quelles, sans compression ni perte de qualité

Préalable indispensable : le bon numéro

Avant tout, il faut que connaître l'adresse du répertoire de stockage des images propres à son site. Pour ce faire, il y a une petite manipulation à faire que j'explique dans ce tutoriel. Une fois qu'on l'a faite et qu'on connaît l'adresse de son répertoire personnel d'images, on peut passer à la suite.

Envoi des images sur le site

Après avoir récupéré ou fabriqué le fond, on la charge dans son répertoire personnel d'images en cliquant, dans la barre d'admin, sur Mise en page > Mise en page personnelle > Fichiers.

Screenshot : envoi des fichiers
On charge l'image ici

Le fond est stocké à une adresse de ce genre :

http://www101.jimdo.com/usertemplates/******/img/fond.jpg

On peut alors passer à l'insertion du code.

Flèche vers le haut

III. Ecriture et insertion du code

Insertion du code

C'est de loin l'étape la plus facile ! En mode admin, on clique sur Paramètres > Insérer dans le header et on insère le code suivant dans la fenêtre de saisie :

<style type="text/css">
/*<![CDATA[*/
.body {}
/*]]>*/
</style>
Screenshot : modifier le header
Avant d'appuyer sur [enregistrer], il faut écrire le code

Il ne reste plus qu'à écrire le code qui ira entre les {}. On va le faire pas-à-pas.

Flèche vers le haut

Ecriture du code pas-à-pas

1. Choix de la couleur du fond

On commence par déterminer la couleur de fond qui apparaîtra sous l'image si celle-ci n'est pas répétée en mosaïque sur toute la page. Pour que le fond soit gris clair, on écrit par exemple :

.body {background: #efefef;}
Aperçu du résultat
Flèche vers le haut

2. Mise en place basique du fond

On ajoute maintenant l'image qu'on veut mettre en fond, ce qui donne :

.body {background: #efefef url(fond.gif);}

Attention : dans le code, il faut remplacer fond.gif par l'adresse de son propre fond (trouvée avec la méthode 1, la méthode 2 ou la méthode 3).

Flèche vers le haut

3. Paramétrage de la répétition du fond

On va préciser si le fond doit être répété ou pas, et si oui, comment.

Background pattern sample

<-- C'est l'image de fond utilisée dans les exemples suivants.

L'attribut repeat répète l'image en mosaïque. On l'utilise avec des textures seamless :

.body {background: #efefef url(fond.gif) repeat;}
                 Aperçu du résultat

L'attribut repeat-x répète l'image horizontalement :

.body {background: #efefef url(fond.gif) repeat-x;}
                 Aperçu du résultat

L'attribut repeat-y repète l'image verticalement :

.body {background: #efefef url(fond.gif) repeat-y;}
        Aperçu du résultat

L'attribut no-repeat bloque la répétition de l'image :

.body {background: #efefef url(fond.gif) no-repeat;}
                Aperçu du résultat

 

Flèche vers le haut

3. Choix de l'ancrage du fond sur la page

On va maintenant préciser si le fond doit être fixe ou mobile sur la page.

 

L'attribut scroll n'ancre pas le fond : ce dernier glisse avec le reste de la page quand on scrolle le contenu.

.body {background: #efefef url(fond.gif) repeat-x scroll;}
Aperçu du résultat








L'attribut fixed ancre le fond à l'écran ; le reste de la page défile par-dessus. Vous en avez la démonstration sur ce site : l'image de fond ne bouge pas quand on scrolle la page.

.body {background: #efefef url(fond.gif) repeat-x fixed;}

En l'absence de précision, c'est l'attribut scroll qui est ajouté par défaut.

Flèche vers le haut

4. Positionnement du fond sur la page

Un fond non répété (avec no-repeat), un fond répété horizontalement (avec repeat-x) et un fond répété verticalement (avec repeat-y) peuvent être positionnés précisément sur la page avec les attributs de positionnement qu'on va voir maintenant.

 

Par souci de simplicité, on va utiliser un fond non répété dans les démonstrations suivantes. Voici les images qui vont nous servir :

L'attribut right top positionne le fond dans le coin supérieur droit de la page :

.body {background: #efefef url(fond.gif) no-repeat right top;}
Aperçu du résultat

L'attribut left top positionne le fond dans le coin supérieur gauche de la page :

.body {background: #efefef url(fond.gif) no-repeat left top;}
                                     Aperçu du résultat

L'attribut right bottom positionne le fond dans le coin inférieur droit de la page :

.body {background: #efefef url(fond.gif) no-repeat right bottom;}
Aperçu du résultat

L'attribut left bottom positionne le fond dans le coin inférieur gauche de la page :

.body {background: #efefef url(fond.gif) no-repeat left bottom;}
                                  Aperçu du résultat

 

L'attribut left center centre le fond sur la gauche de la page :

.body {background: #efefef url(fond.gif) no-repeat left center;}
Aperçu du résultat

L'attribut right center centre le fond sur la droite de la page :

.body {background: #efefef url(fond.gif) no-repeat right center;}
Aperçu du résultat

L'attribut center center affiche le fond au milieu sur la page :

.body {background: #efefef url(fond.gif) no-repeat center center;}
Aperçu du résultat

L'attribut center top centre le fond tout en haut de la page :

.body {background: #efefef url(fond.gif) no-repeat center top;}
Aperçu du résultat

L'attribut center bottom centre le fond tout en bas de la page :

.body {background: #efefef url(fond.gif) no-repeat center bottom;}
Aperçu du résultat

Pour un positionnement plus précis des éléments, on peut utiliser des pourcentages. Ainsi ce code permet-il de centrer le fond tout en bas de la page :

.body {background: #efefef url(fond.gif) no-repeat 50% 100%;}

C'est l'équivalent du code vu plus haut :

.body {background: #efefef url(fond.gif) no-repeat center bottom;}
Aperçu du résultat

 

Je vous renvoie à cette page où vous pourrez tester en visuel diverses valeurs de pourcentages pour mieux saisir leur principe de fonctionnement (auquel je ne me suis jamais habituée !) :

Flèche vers le haut

Exemples de codes complets à insérer dans le header de Jimdo

Exemple 1 : sur fond rosé, le fond est répété verticalement à droite :

<style type="text/css">
/*<![CDATA[*/
.body {background: #FFF8DC url(fond.gif) repeat-y right top;}
/*]]>*/
</style>
Aperçu du résultat

Exemple 2 : sur fond bleu ciel, le fond est répété horizontalement en bas de la page :

<style type="text/css">
/*<![CDATA[*/
.body {background: aliceblue url(fond.gif) repeat-x left bottom;}
/*]]>*/
</style>
Aperçu du résultat

Exemple 3 : sur fond blanc, une image est fixée dans le coin supérieur droit de l'écran :

<style type="text/css">
/*<![CDATA[*/
.body {background: #fff url(fond.gif) no-repeat fixed right top;}
/*]]>*/
</style>
Aperçu du résultat

Attention ! N'oubliez pas d'inscrire la référence de votre propre image de fond dans le code !

Flèche vers le haut

IV. Quelques liens pour approfondir

Les commentaires sont par ici !

Écrire commentaire

Commentaires : 63
  • #1

    geckool (lundi, 20 avril 2009 14:10)

    Merci Isa impeccable tout est dis beau travail.

  • #2

    Marine F. (lundi, 27 avril 2009 22:43)

    Wah, très bien expliqué je vais tenter de faire ça, ça n'effacera pas le reste des personnalisations ?

  • #3

    LHEUILLIER Michel (jeudi, 30 avril 2009 09:49)

    C'est super ISA, quelle aide apportée, encore bravo et merci. Michel

  • #4

    guillaumedepardieu (samedi, 09 mai 2009 18:12)

    grrr merci pour tout !
    mais quand je le fais et qu'à la fin je fais : enregistrer...rien ne se passe...ô desespoir....

    edeline

  • #5

    Isabelle (dimanche, 10 mai 2009 11:49)

    A Marine et Edeline : je viens de vos sites respectifs et ils ont tous deux une image de fond personnalisée... donc je suppose que vos soucis sont réglés et que j'arrive après la bataille ;-)

  • #6

    projetguild (dimanche, 10 mai 2009 18:43)

    .body {background: #645f5f url(URL URL) no-repeat; background-position: bottom; 855px; fixed;}

    Cela fonctionne mais une fois que je descend dans la fenêtre avec la scrollbarre... l'image ne reste pas contre le bas de la fenêtre ! Pourtant le "fixed" sert à ça normalement, non?... je ne vois pas comment régler ce problème ! Qu'ajouter à mon code, stp?

    Merci beaucoup pour tes tutos !!

  • #7

    projetguild (mercredi, 13 mai 2009 18:11)

    J'ai trouvé grâce à ce site :
    http://www.vulgarisation-informatique.com/css-arriere-plan.php

    Tu peux ajouter ces détails à ton article, ils sont vraiment pratiques !

  • #8

    ariasante (vendredi, 15 mai 2009 15:42)

    Bonjour,
    Merci pour ce site tellement chouette. Par contre quand je fais la manip 3, je suis comme edeline à la fin rien ne se passe... Un peu d'aide STP..body {background: #645f5f (URL)repeat;}

  • #9

    Alain (samedi, 23 mai 2009 20:26)

    <style type="text/css">
    /*<![CDATA[*/
    .body {background: #FFF8DC url(fond.gif) repeat-y right top;}
    /*]]>*/
    </style>
    Ok! pour placer une image à droite. Mais pour en placer une à gauche et différente. Je fais la meme procédure et je mets (left top)mais rien ne se passe.Merci Isa de me donner une réponse.Alain

  • #10

    David EYQUEM (lundi, 01 juin 2009 19:50)

    Bonjour Isa, et merci pour ton site.
    J'ai le même problème qu'Alain et Edeline, et je n'arrive pas faire apparaître mon arière-plan !!!

    <style type="text/css">
    /*<![CDATA[*/
    .body {background: aliceblue url (http://www.david-eyquem-kinesiologue.com/cc_images/cache_1290906114.jpg?t=1243705589) repeat fixed;}
    /*]]>*/
    </style>

    Merci de m'aider stp

    David

  • #11

    Isabelle (lundi, 01 juin 2009 21:21)

    A David : le template que vous avez sélectionné semble réfractaire au code. Pouvez-vous essayer le même code avec un autre template ? Je ne vois pas d'autre pb sinon qui puisse expliquer que cela ne marche pas... Tenez-moi au courant.

    A Alain : le code que vous utilisez devrait fonctionner (la preuve est dans l'article : l'image s'affiche bien dans le coin supérieur gauche du cadre). Avez-vous bien chargé votre image de fond et bien localisé son adresse ? Donnez-moi une URL de votre site pour que je visualise le problème et puisse vous aider.

    Bonne soirée,

    Isa

  • #12

    sonia-djaoui (lundi, 08 juin 2009 22:14)

    Bonjour est ce qu'il serait possible d'avoir le liens des images utilisé pour les démonstration (le tournesol ...)

    Merci pour ces aides

  • #13

    worldofangel (mercredi, 10 juin 2009 15:51)

    Salutation moi j'ai aucun soucis merci pour le tuto par contre je voudrais bien avoir un petite astuce pour dupliquer l'image de l'autre coter ^^ car je l'ai mise à gauche je voudrais bien qu'elle soit à droite aussi :)

    Thanks pour tout ^^

    bonne journée

  • #14

    salvanimal-france (vendredi, 03 juillet 2009 18:48)


    hola
    ben perso j'ai suivi à la lettre enregistre mais rien ...c'est toujours comme avant

  • #15

    Isabelle (vendredi, 03 juillet 2009 21:09)

    A Salvanimal : votre code est erroné. Le voici :
    <style type="text/css">
    /*<![CDATA[*/
    .body {{background: #efefef url(http://www.salvanimal-france.com/s/cc_images/cache_1721276517.jpg?t=1246634966)no-repeat right center;}
    /*]]>*/
    </style>

    Il faudrait le remplacer par cela :

    <style type="text/css">
    /*<![CDATA[*/
    .body {background: #efefef url(http://www.salvanimal-france.com/s/cc_images/cache_1721276517.jpg?t=1246634966) repeat-y;}
    /*]]>*/
    </style>

    Par ailleurs, je l'ai précisé : l'astuce ne fonctionne pas avec tous les templates de Jimdo. Certains sont "préparamétrés" et inchangeables.

    A Worldofangel : Pour dupliquer l'image de fond, il faut installer une DIV supplémentaire, ce qui nécessite de passer par la mise en page personnelle. Voir le code ici : http://realia.jimdo.com/astuces-jimdo/snippets-utiles/#double

    A bientôt !

    Isa

  • #16

    solusdofus (lundi, 13 juillet 2009 13:53)

    Super site, domage pour les liens un peu caché dasn le décor!

    Benj

  • #17

    Chantal LESQUELIN GUEGUEN (jeudi, 16 juillet 2009 23:23)

    Bonsoir,

    j'ai mis et ajouté ce site dans mes amis et favoris. Je pourrais mieux le lire à tête reposée car je viens de passer à Jimdo Pro et j'en suis contente!

    Merci à Toi et à très bientôt car c'est très clairement expliqué, à moi d'avoir la tête en place!

  • #18

    Jacky Galliot (jeudi, 23 juillet 2009 11:37)

    bonjour, je souhaiterais créer mon propre fond de site mais comprends rien. Dois je le faire sur illustrator photoshop...et inclure les menus ou seront il collés par jimdo ? Merci et bonne journée a tous
    http://jackgalliot.jimdo.com/

  • #19

    Hamaxicain (jeudi, 06 août 2009 18:20)

    bonjour, j'essaye de mettre un fond téléchargé sur mon site. J'ai essayé plusieurs des solutions proposées, mais je n'y arrive pas voici le code que j'ai rentré
    <style type="text/css">
    /*<![CDATA[*/
    .body {background: #efefef url(http://www.17.jimdo.com/usertemplates/2152119/img/fondweb.jpg.) no-repeat center center;}
    /*]]>*/
    </style>

    et voici le message d'erreur :
    line 6 column 17 - Warning: <style> isn't allowed in <body> elements

    j'ai trouvé une alternative qui me permet d'afficher l'image seulement elle reste en haut et n'est pas en fond :
    <div id="background"><img src="fondweb.jpg" alt="" /></div>

    Quel code utiliser et que changer ??

  • #20

    Stephane (dimanche, 09 août 2009 13:36)

    Merci beaucoup isa pour ce tuto et ton site en général.
    J'ai appliqué le référencement image pour créer des lien avec les social icons. C'est top et élégant comme tu dis.
    Artsenik.
    ps j'attends avec impatience le tuto sur la personnalisation du menu (j'ai fais des essai non concluant :-(

  • #21

    asnpm (jeudi, 20 août 2009 10:20)

    Bonjour Isa,
    Peut on sonoriser une page ou des photos
    Si oui, comment?
    Michel

  • #22

    orton-hd (dimanche, 23 août 2009 02:42)

    Bonsoir, Merci Isa Grace à Toi Mon Blog Est Super !!!

  • #23

    Alexandre (mardi, 25 août 2009 03:43)

    Bonjour Isa,
    Et bien j'ai un mystère ! je m'explique en deux mots: j'ai utilisé ta méthode N° 2, et j'ai enfin pus modifier le fond ! par contre avec un navigateur internet le fond d'écran reste blanc, alors qu'avec Safari, Firfox ou encore Opéra le fond d'écran de mon site est de couleur Or ? J'ai beaux chercher je pige pas. As tu une solution a ce p'tit problème qui personnellement ne me dérange en rien, n'utilisant plus internet explorer qui me pose problème dans ce cas, et tout ce qui touche Windows... Je suis sur Mac depuis un an, et franchement c'est le "kiff"
    Peux tu me donne un tuyau à ce petit problème, car bcp d'internaute utilise internent explorer.
    En te remerciant pas avance.
    Mon site est actuellement en maintenance seul la page d'accueil est accessible (www.mercureyag.com)
    A bientot
    Alex (aborsetto2@me.com

  • #24

    Jacky Galliot (jeudi, 03 septembre 2009 12:17)

    bonjour
    je trouve jolies les planches de jimdo mais puis je supprimer le fond noir et ecrire mes textes dessus ?
    Cordialement et Merci
    jacky.galliot@wanadoo.fr

  • #25

    emir-timour (vendredi, 04 septembre 2009 19:28)

    Bonjour et merci pour ce si pratique tutoriel. Simple, clair net et précis, même quand on n'y connait rien du tout en codage et que l'on doit faire quelque chose de qualité pour le boulot en un temps record (note la page pour faire pareil sur son site perso Jimdo)

    Merci encore !

    Céline (lyn140@hotmail.com)

  • #26

    mickael mainaud (lundi, 07 septembre 2009 13:00)

    bonjour, merci pour ces explications claire, cependant, je n'arrive toujours pas a changer le fond.
    quand je clique sur " enregistrer", rien ne se passe, et e fond par defaut jimdo reste.
    voici mon code


    <style type="text/css">
    /*<![CDATA[*/
    .body {background: ffffff url(http://i200.photobucket.com/albums/aa112/cariocanais/fond-4.gif) no-repeat fixed center top;}
    /*]]>*/
    </style>


    merci d'avance pour votre aide, je commence a me decourager :)

  • #27

    muguet benoit (dimanche, 27 septembre 2009 13:24)

    bonjour!! j'essaie de progresser mais c'est dur!!vous m'aidez bien en tt cas...
    j'ai une question, je ne suis pas satisfait de ma page d'accueil, je voudrais m'inspirer de ce site( http://www.benjaminbrolet.com/index.html)
    je pense qu'il est possible de s'inspirer du code source de la page??
    est ce possible ?
    merci d'avance pour vos éclairages
    benoit

  • #28

    anwarock (mardi, 06 octobre 2009 11:50)

    Bonjour
    J'ai le même problème qu'Alexandre, mon fond d'écran ne s'affiche pas sur explorer, par contre ça marche sur Firefox!

    <style type="text/css">
    /*<![CDATA[*/
    .body {background: #000000 url(http://www8.jimdo.com/usertemplates/3809209/img/fond-lighting.jpg)no-repeat fixed right top;}
    /*]]>*/
    </style>

    Si tu peux m'aider à résoudre se problème je t'en serai reconnaissante!
    Merci pour les tutos ils sont super et bon courrage pour la suite

    Marine (marine.barbier@hotmail.fr)

  • #29

    bsftv (vendredi, 16 octobre 2009 13:52)

    je rentre mon code et rien ne se passe... peut etre il ya til une erreur dans mon code?

    <style type="text/css">
    /*<![CDATA[*/
    .body {background: #efefef http://img162.imageshack.us/img162/3236/backgroundcopie.jpg repeat fixed left top;}
    /*]]>*/
    </style>

  • #30

    Crespo Jean Marc (mardi, 20 octobre 2009 10:58)

    bonjour

    Est il possible de mettre une page flash avant de rentrer sur le site ?

  • #31

    lescouleursdecelia (vendredi, 30 octobre 2009 21:49)

    Bonjour,

    J'essaie de mettre une image de fond en haut à gauche, mais elle passe forcément sous le fond des blocs (de titre, texte...).
    Y a-t-il un moyen pour passer l'image au premier plan? Ou pour rendre les blocs de titre et de texte transparents (comme sur le site de anwarock par exemple)? J'ai essayé plusieurs templates mais je n'ai réussi avec aucun...

    Merci d'avance, et merci pour ce super site!

  • #32

    alexandre BORSETTO (mardi, 03 novembre 2009 13:14)

    Bonjour Isa,
    Et bien j'ai un mystère ! je m'explique en deux mots: j'ai utilisé ta méthode N° 2, et j'ai enfin pus modifier le fond ! par contre avec un navigateur internet le fond d'écran reste blanc, alors qu'avec Safari, Firfox ou encore Opéra le fond d'écran de mon site est de couleur Or ? J'ai beaux chercher je pige pas. As tu une solution a ce p'tit problème qui personnellement ne me dérange en rien, n'utilisant plus internet explorer qui me pose problème dans ce cas, et tout ce qui touche Windows... Je suis sur Mac depuis un an, et franchement c'est le "kiff"
    Peux tu me donne un tuyau à ce petit problème, car bcp d'internaute utilise internent explorer.
    En te remerciant pas avance.
    Mon site est actuellement en maintenance seul la page d'accueil est accessible (www.mercureyag.com)
    A bientot
    Alex (aborsetto2@me.com

  • #33

    magesdenlio (mercredi, 11 novembre 2009 20:17)

    Bonjour!
    Alors moi, mon problème c'est que ça ne marche pas du tout j'ai bien tout vérifié je ne vois pas où est l'erreur, je vous laissse mon code en espérant que vous me le corrigerez:
    <style type="text/css">
    /*<![CDATA[*/
    .body {background: #efefef url(
    http://magesdenlio.jimdo.com/s/cc_images/cache_1433186950.jpg?t=1257965785)no-repeat center center;}
    /*]]>*/
    </style>

  • #34

    Antoine Vivier (samedi, 21 novembre 2009 12:20)

    Bonjooouuurr,
    Même problème que le camarade Magesdenlio : walou, quedalle...etc.
    J'espère que ce n'est pas mon template qui ne veut rien savoir!
    Je te laisse aussi mon code si t'as 5 min pour jeter un oeil.
    Merci.

    <style type="text/css">
    /*<![CDATA[*/
    .body {.body background: #FEFEFE url(http://www.graflab.fr/s/cc_images/cache_2049661109.jpg?t=1258801468)no-repeat fixed;}
    /*]]>*/
    </style>

  • #35

    bahia (samedi, 28 novembre 2009 00:19)

    bonsoir,
    je viens de tester la solution n°2: super facile, et résultat impec'!
    Merci pour ton site, c'est une mine d'informations utiles qui permet de progresser sans stress....

  • #36

    Jacky (mercredi, 02 décembre 2009 07:27)

    Bonjour, je viens de passer un grand moment à regarder sites divers. je dois avouer que celui de David DE sOUZA a un header impressionnant. Bien sur vos explications sont bien, mais voilà, ne deviens pas webmaster qui veut !!! j'en suis loin. Cordialement, Jacky

  • #37

    levinland (lundi, 21 décembre 2009 18:39)

    Bonjour!
    Je viens d'arriver sur Jimdo et je voudrais personnaliser mon fond d'écran...pour cela, dois-je automatiquement passer en jimdoPro?
    Merci d'avance pour votre précieuse réponse.

  • #38

    orchidees-salignac2009 (mardi, 05 janvier 2010 14:06)

    Bonjour,

    je souhaite une image en fond d'écran en bas à droite de mon site et je n'y arrive pas, voisi le code que j'ai entré quand je fais enregistré rien n'apparaît:

    <style type="text/css">
    /*<![CDATA[*/
    .body {background: url(http://orchidees-salignac2009.jimdo.com/s/cc_images/cache_1210210312.jpg?t=1262691387)no-repeat rignt bottom;}
    /*]]>*/
    </style>

    Je vous remercie pour votre réponse.

  • #39

    Beltàchjara (vendredi, 08 janvier 2010 21:31)

    Bonsoir,

    Merci Isa pour le tuto.
    Je viens d'utiliser la méthode numéro 3 et en suivant scrupuleusement toutes les indications tout à bien fonctionné.

    Cordialement

  • #40

    Vico lastro (vendredi, 29 janvier 2010 21:43)

    Bonjour,
    sur mon site j'aimerais mettre un fond très grand (en appliquant la méthode 2), mais en chargeant l'image sur le site, elle devient très petite. Une fois que je copie l'adresse de l'image et que je la met dans modifier le header, elle reste petite, comme sur la page "cache", au lieu d'être au format originel.

    Aidez-moi s'il vous plaît !!!!

  • #41

    labandrole (jeudi, 04 février 2010 02:38)

    Bonjour,

    Je souhaiterais également remplacer le fond existant par une
    image.
    J'ai suivi la procèdure N°2 mais rien n'y fait.
    Voici le code intégré dans le head :

    <style type="text/css">
    /*<![CDATA[*/
    .body {background: #efefef url(http://labandrole.jimdo.com/s/cc_images/cache_2043772911.jpg?t=1265218291)no-repeat scroll;}
    /*]]>*/
    </style>

    Serait-ce une incompatibilité avec le template ?

    Merci de bien vouloir consacrer un peu de votre temps afin
    d'éclairer ma lanterne.
    Bien cordialement,

    Yves

  • #42

    corinnelawson (lundi, 08 février 2010 10:24)

    Bonjour,
    j'essaie de créer mon site via jimdopro. J'ai utilisé un template proposé dans les fonds spéciaux. problème il y a un logo BoD (Books on demand) que je ne veux pas voir apparaître dans le header; Que puis-je faire. En revanche toute la dispo de la page et les couleurs me conviennent... SVP aidez moi... merci d'avance

  • #43

    facodivisionquebec (dimanche, 14 mars 2010 10:35)

    idem que corinne....

  • #44

    fredscountry (dimanche, 11 avril 2010 11:01)

    Merci beaucoup,
    j'y suis arrivé enfin presque (du coup, je l'ai enlevé) car l'image choisi n'était pas en fond mais prenait la place des éléments déjà existant sur la page (texte ou liens), merci pour la réponse if possible...
    Have a nice sunday

  • #45

    esvl-triathlon (vendredi, 14 mai 2010 19:23)

    bonjour, je souhaite intégrer une image qui prenne l'ensemble de mon fond en une seule fois, comment dois je faire ?

    car avec ce tuto mon image se reduit a chaque fois et je ne souhaite pas la répéter mais l'etirer pour qu'elle ne s'affiche qu'en une seule fois !

    merci (j'utilise la methode n 2 )

  • #46

    loïc huau (lundi, 30 août 2010 01:17)

    j'ai tout essayé,le problême est quel modèle utiliser pour obtenir un fond entier,en plus les liens ne fonctionnent pas quand je les installent...où trouver l'adresse de l'image,j'en ai dans mes documents déjà sur mon pc...merçi d'avance

  • #47

    legarage (vendredi, 10 septembre 2010 18:11)

    Précision sur la méthode 3 : il semble que Jimdo ait changé son mode de stockage des fichiers. De ce fait, l'adresse (l'URL) des images stockées dans la partie "Design personnel" ne ressemble plus à ce qui est expliqué dans le tutoriel additionnel "trouver son répertoire personnel".
    On obtient désormais des chemins du type :
    "http://u.jimdo.com/www30/o/s40d2e27109faa130/userlayout/img/bg.gif?t=1284132535".

    Pour avoir fait le test, il semble que l'on peut simplifier cette adresse en supprimant la fin du chemin : "http://u.jimdo.com/www30/o/s40d2e27109faa130/userlayout/img/bg.gif".

    Le début du chemin "http://u.jimdo.com/www30/o/s40d2e27109faa130/userlayout/img/xxx" étant propre à son site, on doit pouvoir suivre le reste du tutoriel pour intégrer de beaux arrières plans.
    Bonne chance!

  • #48

    Jacky Galliot (samedi, 23 octobre 2010 11:50)

    Bonjour Madame l'inconnue lol
    je voudrais savoir si il y a une astuce pour compter les photos de son site ?? C'est une colle ou pas ? Bien cordialement Jacky

  • #49

    josephcastan (lundi, 13 décembre 2010 08:37)

    moi j'ai beau tout essayer, même en changeant de template ça ne fonctionne pas :-(
    Help !!!

    Cordialement

    Alan Reynaud

  • #50

    fadlaoui mohammed (mercredi, 12 janvier 2011 18:29)

    votre site est le premier site de physique chimie au monde qui permet à l élève et même le prof d'accéder facilement au cours , exercices, correction et surtout les expériences sans trop d'effort .
    je vous félicite Mr fadlaoui
    de la part d'un collège de Marrakech

  • #51

    pechekayac (lundi, 21 février 2011 15:15)

    bonjour,
    vos explications sont tres claires, mais je n'y arrive pas

    je suis en train de faire mon site avec jimdo buisness et je voudrais faire un fond noir(ça c'est ok)et je voudrais rajouter a mon bandeau une image suplementaire sur le coin gauche de ma page.(et par la suite changer cette image a chaque page ).
    je suis une grosse bille , je sais ! mais il faut que j'y arrive( c'est pour mon boulot)
    a l'aide, merci d'avance(je suis sur toulouse)
    stef

  • #52

    Géraldine Piardet (vendredi, 25 mars 2011 22:33)

    Bonjour,

    Je ne sais pas si c'est parce que j'arrive bien tardivement en commentaire, mais je n'y arrive pas, ça affiche la couleur de fond mais pas l'image...
    Comment faire ?

    merci beaucoup !

  • #53

    jéjé_mimolette (lundi, 25 avril 2011 22:11)

    Un grand bravo pour ce site!! Un tutoriel d'enfer grâce à beaucoup de boulot!
    Merci beaucoup pour tous ces tuyaux!

  • #54

    O.M.S. d'Eybens (lundi, 11 juillet 2011 19:08)

    Tout d'abord bravo pour vos TRÉS précieux conseils
    La manip pour retrouver l'adresse où sont localisées les images est assez délicate si on se plante (ce qui m'est arrivé sur un autre site que j'utilise pour mes tests).

    Utilisateur de Firefox j'ai trouvé peut-être un mode moins "dangereux" :

    Une fois arrivé sur le cadre où sont repris les fichiers images. -Cliquer droit sur bg.gif par exemple...
    Puis sélectionner : Code source du cadre
    Une fenêtre s'ouvre pour afficher le code source ... normal.
    Un petit CTRL+F pour rechercher et localiser le fichier bg.gif et sur la même ligne on retrouve la précieuse ligne et son numéro magique.
    Apparemment les derniers chiffres qui suivent le nom du fichier image n'influent pas sur le résultat si on les supprime.
    Je ne sais pas si mes explications sont bien claires :).

  • #55

    angemichaeljackson (samedi, 01 octobre 2011 19:41)

    bonjour j'ai essaiyer de placer le code mais rien ne se passe . snif

    j'ai peut etre oublier quelque chose ?

    merci d'avance pour votre aide

    <style type="text/css">
    /*<![CDATA[*/
    .body {background: #B0A3B6 url(http://imageshack.us/photo/my-images/69/1stardots002.gif/)repeat;}
    /*]]>*/
    </style>

  • #56

    dumas-legacy (mercredi, 19 octobre 2011 11:13)

    Bonjour !
    Je viens juste d'ouvrir mon site avec Jimdo.
    Votre site m'aide beaucoup dans ma personnalisation.
    Juste une question :
    est-il possible de mettre une image comme vous l'avez expliqué, non pas sur un fond de couleur uni mais sur une texture appliquée sur l'ensemble de l'arrière plan ? Merci !
    PS : je précise que je suis extra débutante en informatique

  • #57

    Favier (mardi, 29 novembre 2011 14:14)

    Bonjour, j'ai pris connaissance de votre tuto, tres bien expliqué. Merci.
    Le truc c'est qu'en cours de route j'ai changé d'avis, je ne veux rien changer au fond mais seulement à la side bar. Je cherches donc à accéder au css et là plus, rien. Il m'affiche seulement le code que j'ai copié collé (celui pour mettre l'image test qui sert à trouver l'adresse d'hébergement de la méthode 3). est-ce normal ? J'ai reselectionné le design initial mais les codes ne s'affichent plus (mon site reste bien affiché comme d'origine cependant). Expliquez moi svp.
    Cordialement
    Morgane

  • #58

    83cleanstreet (mercredi, 21 décembre 2011 16:57)

    Bonjour,

    merci pour l'explication.
    J'ai réussi à changer le fond de l'image.
    J'ai mis une couleur de fond et une petite image. J'arrive à la faire bouger dans l'écran.
    J'ai réussi à refaire ça sur 1 seule page (celle que j'ai choisi pour être ma page de garde)
    Mais le PROBLEME, c'est que l'image s'affiche en PETIT !! (pourtant j'ai pris un grand format).
    Je voudrais afficher l'image en PLEINE PAGE.
    Est-ce que vous pouvez me donner le code spécial JIMDO pour faire ça svp ?
    parce que j'ai trouvé des tutos intéressants pour un fond d'écran extensible qui s'adapte à la taille de la fenêtre, mais c'est en HTML et CSS. la formule ne marche pas sur JIMDO.
    MERCI de me répondre sur mon mail clk83500@gmail.com

  • #59

    super-mangas-express (vendredi, 17 février 2012 23:08)

    pourquoi quant on clik sur enrengitre rien ne se mais

  • #60

    Jozef (vendredi, 01 juin 2012 12:49)

    Thank you for info

  • #61

    Niclaniclo (dimanche, 30 décembre 2012 16:19)

    Merci pour tes tutos, mais il y a parfois des trucs pas très clair.

  • #62

    Siméon Songo (lundi, 25 février 2013 01:07)

    Finalement, personne ne réussit rien ou presque ... mais tout le monde dit MERCI. lol.

  • #63

    Isa (lundi, 25 février 2013 18:39)

    @Siméon : un "merci" est en tout cas plus agréable à lire que votre commentaire doux-amer... ;)
    @ux autres : suivez bien les indications pas à pas pour réussir, notez que la méthode 3 est réservée aux utilisateurs avancés et que la technique ne peut pas fonctionner avec tous les templates.

Ruban