Image derrière un texte sans le décaler

Version imprimable

19/05/2008, 10h56
knolz

Image derrière un texte sans le décaler
Bonjour,

Voila mon problème. Je suis en train de réaliser un site, et j'ai la partie du milieu qui contient du texte. Pour rendre le tout plus joli, j'aimerais mettre une image derrière le texte.

Actuellement ce qu'il se passe, c'est que lorsque je met l'image, tout le texte est décalé et se met à côté de l'image.

http://img217.imageshack.us/my.php?image=bugth1.jpg

Comme vous le voyez, le "Bienvenue..." se décale sur la droite alors que j'aimerais qu'il soit sur la barre bleu.

J'ai testé en mettant des position relative/absolute dansl e CSS mais je n'y arrive pas.

Merci ;)

PS : en ce qui concerne mes div, j'ai ça :
Code:

1 2 3 4 5 6 7 8 <div id="cadre_middle"> <div id="cadre_barre"> </div> [....] </div>
19/05/2008, 11h11
MasterOfChakhaL

Salut,

Peut-être qu'un peu de code pourra nous aider à te répondre (xhtml et css)

Disons que je ne savais pas trop quoi mettre. Je vous met le CSS des 2 div :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
#cadre_middle {
	width:58%;
	margin-top : 0px;
	margin-left: 11px;
	margin-right: auto;
	float:left;
}
 
#cadre_barre {
	background-image:url(images/barre.gif);	
	height:20px;
	width:62%;
	margin-top : 0px;
	margin-left: -5px;
	margin-right: auto;
	float:left;

19/05/2008, 11h36
Er3van

Sans le code HTML on ne sait pas trop à quoi correspond quoi...

Ceci étant, j'vois pas pourquoi tu ne mets pas simplement ton image en arrière-plan ( background ), ça marcherait très bien.
19/05/2008, 11h52
knolz

Le code HTML ne servirait à rien puisque dans le cadre_middle, il peut y avoir tout et n'importe quoi, c'est le corps du site. J'ai essayé en mettant l'image dans le css en background de cadre_barre, et également en mettant dans le div le HTML pour mettre l'image (et gérer le positionnement dans le css) mais ça me décale tjrs le texte.

Sinon j'ai essayé avec l'image en background du cadre_middle, mais ce qui me gêne c'est que je ne peux pas placer mon image ou je le souhaite (si je fais des margin-top etc, ça me décale mon texte également)
19/05/2008, 12h11
MasterOfChakhaL

Pour positionner l'image de fond, il suffit d'utiliser la propriété css suivante:

Code:

background-position: TOPpx LEFTpx
19/05/2008, 12h12
Er3van

J'suis pas sûr de comprendre ce que tu veux, mais

Code:

background-image:url(images/barre.gif) x y ;

permet de fixer des points d'ancrage de ton image, où x est le positionnement horizontal et y vertical.
19/05/2008, 12h16
Candygirl

Citation:

Envoyé par Er3van

J'suis pas sûr de comprendre ce que tu veux, mais

Code:

background-image:url(images/barre.gif) x y ;

permet de fixer des points d'ancrage de ton image, où x est le positionnement horizontal et y vertical.

Si tu veux associer directement les valeurs de background-position avec l'url, tu dois alors utilise la propriété raccourcie background et non plus background-image:

Code:

background:url(images/barre.gif) x y ;
19/05/2008, 12h28
Er3van

Oui, tout à fait d'accord ^^'

Juste fait un copier-coller en pensant gagner du temps :)
19/05/2008, 12h29
knolz

Merci, je test ça cet après-midi et je vous tiens au courant ;)
19/05/2008, 13h21
knolz
Alors j'ai fait les tests, mais j'ai quelques soucis :
Code:

1 2 background:url(images/barre.gif) -10px 500px;
Le premier, c'est que j'ai besoin de mettre une valeur négative en X pour que mon image soit collée à celle de gauche. Avec une valeur négative,ça décale l'image vers la gauche mais elle reste toujours dans le div ! c'est à dire que le bout qui aurait du être à gauche passe à droite sur la même ligne. Et justement, mon image ne prenant pas toute la largeur du div, elle se répéte plusieurs fois (qui est mon deuxième problème).

Enfin, quelque soit ma valeur en Y, mon image reste collée en haut de mon div.

Merci à tous.
19/05/2008, 13h34
Er3van

Code:

background:url(images/barre.gif) -10px 500px no-repeat ;

Mais quoi que t'en dises avec du code on pourrait mieux t'aider, parceque vu ce que tu décrit c'est un peu nawak ton code.
19/05/2008, 13h39
knolz
Mais ce que j'ai donné au début, c'est la fin de mon header. Après j'appelle tel ou tel fichier, donc je vois pas en quoi ça pourrait aider de te donner un fichier alors que je peux en appeler une 20aine qui sont complétement différents de celui que je t'aurais donné...

Mes fichiers commencent par require('header.php'), et après y'a du code...

Mon header finit par
Code:

1 2 3 4 5 6 7 <?php require('auth.php'); ?> <?php require('menu.php'); ?> <div id="cadre_middle"> <br></br><br></br>
J'appelle ensuite les fichiers selon la page en question.
20/05/2008, 10h22
knolz

personne svp ? :'(