image de fond

[vincent.lepy]

Voila je souhaiterai mettre une image de fond sur mon site.
Voici le code de ma page css pour mon body:

body {
font-family: arial;
font-size: 20px;
color: yellow;
margin: 10px;
padding: 0px;
background: "mon_image.jpg";
/* border: solid black 9px; */
}

Je ne comprend pas pourquoi ca ne marche pas.
J'ai vu sur Internet que tout le monde dit de mettre: background: "mon_image.jpg";
Si vous pouvez m'aider ????

[gael49]

Salut !

Essaye avec :

Code: Tout sélectionner

body {
font-family: arial;
font-size: 20px;
color: yellow;
margin: 10px;
padding: 0px;
background-image: url(mon_image.jpg);
background-position : 0px 0px;
/* border: solid black 9px; */
}

tu peux aussi ajouter :

Code: Tout sélectionner

background-repeat : repeat-y;
ou background-repeat : repeat-x;
ou background-repeat : no-repeat;

selon que tu veuilles répéter ou non le fond.

[vincent.lepy]

Grand merci pour ce code. Maintenant je souhaiterais que sur cette image il y est comme un voile pour qu'elle soit moins visible. Je sais pas si je suis claire là ??

[sarkar]

Un café ,

je plaisante.

Non, css ne peut pas gérer ce que tu veux faire. Pour que ce soit possible, il faut que tu travaille l'image avec un logiciel comme Photoshop(payant), The Gimp (gratuit). Il suffit de réduire la luminosité de la photo pour obtenir le résultat souhaité.

[gael49]

Effectivement il faut modifier l'image, mais sinon tu peux aussi modifier son opacité avec CSS.

Tu mets par exemple l'ID "image_fond" à ton image.

et dans le css tu ajoutes :

#image_fond {
opacity : 0.8;
filter : alpha(opacity=80);
-moz-opacity : 0.8;
}

[vincent.lepy]

Ok merci pour votre aide. Je pense que je vais utiliser la premiére solution. Encore merci à vous. Salut

[coyote89]

D'autant qu'il me semble que la propriété opacity n'est pas intégrée à la norme CSS2. C'est prévu pour CSS3 je crois.
Sinon, un exemple pour gérer un peu les différents navigateurs :

Code: Tout sélectionner

img {
  filter:alpha(opacity=50); /* IE */
  -moz-opacity:0.5; /* Mozilla */
  -khtml-opacity: 0.5; /* Safari */
  opacity: 0.5; /* CSS3 */
}

[Edit] : je viens juste de voir que Gael avait déjà mis un exemple...