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 !
/!\ Attention : Ce code ralentit assez le chargement de la page ! Evitez donc de le mettre sur une page contenant déjà beaucoup de scripts !
- 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.
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.
#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;
}
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;
}
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.
Aucun commentaire:
Enregistrer un commentaire