aide écrire sur image ?

Version imprimable

bonjours a tous

Voila je suis en création de site et je rencontre un petit problème dés le début, j'ai parcouru pas mal de forum et je m'y perd un peu :(
Donc je fais appel a votre savoir svp.

J'ai quelques bases XHTML, mais je dois reconnaitre qu'elles sont minimes ;)

Donc, comme dis dans le titre, je n'arrive pas a mettre du texte sur mon image de fond, elle se retrouve en dessous :( donc invisible ;)

Je dépose mon code XHTML et CSS... pour avoir votre avis.

XHTML:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>titre a venir ;)</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1> LE TEXTE QUE JE NE VOIS PAS :( </h1> <div id="fond"> <img src="image/logo12.jpg" alt="fond" /> </div> </body> </html>
CSS:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 body { overflow:hidden; } #fond { position:absolute; top:0; left:0; } #fond,#fond img { width:100%; height:100%; }
merci d'avance pour vos réponse ;)

07/11/2010, 13h12
viyppi
voila, j'ai fini par trouver quelque chose, mais maintenant voila que mon image de fond ne prend plus la largeur du navigateur, mais elle se repete :(

je la place qu'avec le CSS
Code:

1 2 3 4 5 6 7 8 9 10 11 body { width: 1200px; margin: auto; margin-top: 20px; margin-bottom: 20px; background-image: url("image/logo12.JPG"); }
biensure si je mets un bacground no repeat, elle ne se repete plus, mais un beau :( cadre blanc sur la droite

Une idée peu etre ? svp

merci d'avance ;)
07/11/2010, 14h00
thelvin

Je crois que le CSS ne peut pas redimensionner les images utilisées en background (par contre, pour ne pas les répéter, c'est background-repeat: no-repeat; )
'Faut dire aussi que redimensionner les images c'est drôlement moche.

Bon, la seule solution que je vois, c'est de faire comme au début : insérer l'image avec <img> et position absolue en CSS et tailles de 100%. Mais ajouter la propriété CSS :

Code:

z-index: -10;

Ce qui devrait faire qu'elle s'affiche sous tout le reste.
07/11/2010, 15h03
viyppi

Citation:

Envoyé par thelvin

Je crois que le CSS ne peut pas redimensionner les images utilisées en background (par contre, pour ne pas les répéter, c'est background-repeat: no-repeat; )
'Faut dire aussi que redimensionner les images c'est drôlement moche.

Bon, la seule solution que je vois, c'est de faire comme au début : insérer l'image avec <img> et position absolue en CSS et tailles de 100%. Mais ajouter la propriété CSS :

Code:

z-index: -10;

Ce qui devrait faire qu'elle s'affiche sous tout le reste.

Merci beaucoup pour cette réponse rapide et le code est mieux que ce que pensais faire ;) je vais pouvoir progresser un peu :D

Tres sympa.