Astuces Blog

Un petit blog sans prétentions pour vous aider à créer le votre. Trucs et astuces, questions, aides et entraides…

11 août 2007

COMMENT METTRE UNE IMAGE EN FOND SUR MON BLOG ?


Voila, le code permettant de mettre une image en fond dans votre blog. Il suffit de coller ce code sur l'édito <BODY BACKGROUND="PAPER.gif"> </BODY>

Mode d'emploi : Il suffit de changer PAPER.gif par l'adresse url de l'image.

Pour la connaître, vous pouvez cliquer à droite dessus puis choisir : "Propriétés". Des infos apparaissent sur l'image dont l'adresse de l'image.

/!\ Attention : Ce code ralentit assez le chargement de la page ! Evitez donc de le mettre sur une page contenant déjà beaucoup de scripts !

Pour ajouter une image en fond il faut

  • Déterminer sur quelle bloc on désire appliquer cette image.
  • Une image

Le bloc (ou l'objet)

Chacune des divisions (tous ce qui est entre <DIV> et </DIV>) determinent un objet.

L'aspect de ces objet est défini par un style de la feuille de style.

Un conseil, commencez par changer la couleur de fond, background-color, dans les styles pour voir ce que ça fait.
Mettez des couleurs très différentes. Ensuite vous remplacerez si vous voulez background-color par une image.

Pour modifier le fond du bloc "container" par exemple, il faut modifier la valeur de background-color dans le style container de la feuille de style.

Ici le container prendra la couleur rouge (voir Les couleurs)

#container {
  width: 800px;
  padding: 0px;
  background-color: #FF0000;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-width: 1px;
  border-color: #0099CC;
  margin-right: auto;
  margin-left: auto;
}

Autres exemples :

  • Pour modifier le fond de la zone tite changez title

  • Pour modifier le fond d'un message changez Blogbody

  • Pour modifier le fond la page changez body

  • ...

Ayant repéré l'objet sur lequel vous désirez appliquer une image, reste à la placer.

L'image :

On peut mettre une image de la taille du bloc ou une image qui se repete jusqu'à occuper la place du bloc. Le choix de l'image dépendra de l'effet que l'on ssésire obtenir. Mais attention de ne pas mettre d'images trop "lourdes" le temps d'affichage de votre page risquerait d'êter disuasif.

L'image choisie, placez la sur le serveur de Canalblog avec la méthode indiquée plus haut. Et notez la commande qui permet de l'afficher (copier coller dans le bloc-note par exemple) en l'occurence, ici seule son adresse vous suffira.

Il faudra alors modifier le style de l'objet.

#container {
  width: 800px;
  padding: 0px;
  background-image:url("http://Babtest2.canalblog.com/fond02.jpg"); background-repeat:repeat;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-width: 1px;
  border-color: #0099CC;
  margin-right: auto;
  margin-left: auto;
}

Vous trouverez ici http://fr.selfhtml.org/navigation/css.htm#arriere_plan les références de background-image.

Posté par Naneu à 00:27 o Graphisme Commentaires [12] - Permalien [#]

- * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * -

Commentaires

    J'ai essayé de mettre un fond d'écran derrière la page de mon blog mais j'ai une résolution de 1024x...
    j'aimerais rétrecir la résolution de ma page texte pour qu'on puisse voir mon fond d'écran.Est ce possible?Et comment puis je faire cette manip?
    Merci d'avance.

    Posté par Loïse, 29 mars 2006 à 22:24
  • heu...

    le code a quel endroit il faut l'insérer ???? j'ai pas trouvé !

    PS : merci grace a toi j'ai ENFIN réussi à mettre de la musique sur mon blog !!

    Posté par ElooOO°°, 17 juin 2006 à 22:02
  • euh..

    je vois pas trop où on doit l'insérer.. faut aussi être en mode "avancé"?? parce que je suis trop pomée là je t'avoue!!lol! sinon super ton blog c'est génial !! bravo! j'ai mis un lien vers ton blog sur "mon mien"..

    Posté par darkangelblog, 28 juin 2006 à 15:11
  • ui il faut etre en mode avancé (haaa mais j'ai tjs po expliqué où il faut coller ce code, c'est un peut compliquer ! lol. Bon ben pdt les vacs...)

    Posté par naneu, 28 juin 2006 à 19:27
  • il faut le coller en haut dans l'entete

    Posté par rico, 06 août 2006 à 20:28
  • je la voie pas l'entete? :s

    Posté par queenie, 10 août 2006 à 21:22
  • Autre méthode

    Pour mettre une image de fond en mode avancé, on peut aussi aller dans la feuille de style css et ajouter
    background-image: url(image_de_fond.jpg);
    entre body{ et }. Ceci présente l'avantage de ne pas nécessiter de modifier tous les fichiers html du blog ^_^

    Posté par Tût-tûûût, 11 août 2006 à 10:38
  • Merci

    C'est vraiment génial de partager toutes ces astuces, je suis vraiment ravie je ne savais pas comment mettre un fond j'y suis parvenu !!! merci bq !

    Posté par Kao, 02 novembre 2006 à 14:59
  • JTDR

    Je t'adore mon Karl!!

    Posté par fan2moi04, 30 mars 2007 à 17:55
  • amélioration

    J'aimerais que tu me conseilles pour améliorer mon blog et pr le faire connaitre je sais qu'il existe des sites pr les faire connaitre mais lesquels et surtt sont ils gratuits car certains sont payants... merci d'avance.

    Posté par danette, 20 juillet 2007 à 20:48
  • Voila quelques sites
    En général faut quand meme payer (pour des banderoles, messages etc qui te donnent bcp de visites, mais bon essaye tjs...) l'inscription est gratuite !!!

    http://astucesblog.canalblog.com/archives/2006/09/28/2783053.html#comments

    Posté par naneu, 21 juillet 2007 à 23:26
  • un probleme .

    Mon image apparée , mais pas en entier ...

    la largeur correspond , mais pas la hauteur ...

    il n'y a qu'une partie de l'image ...

    que dois je faire ?

    Posté par Da-nourz, 25 septembre 2007 à 11:14

Poster un commentaire