aide écrire sur image ?

**viyppi** · 06/11/2010, 19h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**viyppi** · 07/11/2010, 13h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**thelvin** · 07/11/2010, 14h00

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

z-index: -10;

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

**viyppi** · 07/11/2010, 15h03

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 :

Sélectionner tout - Visualiser dans une fenêtre à part