Image en fond

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.

Comments

[chimeria]

c'est tellement compliqué ces html, grâce à toi, j'ai pu mettre une photo en bannière!! et maintenant que je sais comment ça marche, je vais pouvoir faire plein de choses!!!

[E.]

Oui. Il suffit de remplacer par container, je crois. Ou bien de changer tous les blocs.

[en passant]

haa enfin un endroit avec des explications et pédago... merci merci mais une question me trifouille... peut on mettre une image en fond en tenant plus compte des blocs? c'est à dire que j'aimerai mettre une image en fond qui prenne tout l'espace de l'écran et qu'elle reste fixe...
Merci encore d'avoir fait un post de cette qualité...