Discussion :

[budyraptor]

bonjour,

voila mon soucis, mon image (background:url)
apparait dans mon Div mais celle est coupée.

l'image fait :

712px de large
602px de haut
les mêmes dimensions de mon Div.

j'ai beau essayer d'autres solutions je ne trouve ou et mon erreur.

lorsque je ne mets pas background-repeat:no-repeat;

celle ci se repete

si je mets background-repeat:no-repeat;

celle ci est coupée.

voici le code:

Code :

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

1
2
3
4
5
6
7
8
9
div#fond{
overflow: auto;
background:url(../pages_/img_page/fonds/fond_page.gif);
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
width:712px;
height:602px;
}

merci pour vos réponses

Budyraptor

[budyraptor]

j'ai modifier la taille de mon image pour quelle puisse être
affichée entièrement mais je ne trouve pas celle solution satisfaisante.

de plus avec cette méthode je ne comprends pas quelle est mon erreur

dans les attributs de mon Div

Quelq'un peut il prendre 5 min pour me l'expliquer?

Merci

Budyraptor

[4R416N33]

Tout simplement, ton image ne fait pas les memes dimensions : 712*750 dans une div de 712*602

Donc ton image est coupée.

Ensuite, il reste à voir peut être (je ne sais plus) si la scrollbar est ses 15-20 pixels vont gêner ou non ???

[budyraptor]

Salut à tous,

Merci pour ta réponse 4R416N33.

j'ai mis l'image à la même dimension que le Div mais celle est toujours
coupée. mon image est trop haute et je n'arrive pas à la descendre, pour le scroll bar je ne comprends pas.

La même image utilsée dans accueil n'est pas coupée, cela doit venir du fait que je n'utilise pas le Css c'est un lien du type:

<img src="mon_image.gif">

donc mon problème vient de mon script je pense.

dans mes autres pages (ou l'image est coupée)j'ai mis:

Code :

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

1
2
3
4
 
<div id="fond">
 
</div>

et joint ma feuille de style en externe

pour rappel le code Css

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
 
 
div {
text-align:left;
} 
 
/*background*/
div#fond{
overflow: auto;
background:url(mon_image.gif);
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
width:712px;
height:602px;
}

merci pour vos réponses.


Budyraptor

[FraK]

pour l'image
essaies background-image: url(....);
peux être le fait d'oublier de préciser "image" intervient ici, sinon je ne sais pas ..

[Candygirl]

Ton problème est du à l'emploi du background-attachment à fixed. La valeur fixed fait que ton fond est positionné au centre de la fenête de visualisation et non pas au centre de l'élément auquel il est rataché.

[budyraptor]

Je viens de m'en rendre compte.

Mes excuses pour les premières explications fausses mais je débute en CSS,
j'avoue que j'ai du mal encore et ce n'est pas faute de lire les cours ou la FAQ.

dans un premier temps j'ai enlevé dans ma feuille de style de l'index ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
/*centrage du DIV conteneur*/
html { 
	 margin:0px; 
	 padding:0px; 
	 } 
 
body {
	margin:0px; 
	padding:0px; 
    text-align: center;
     }

mais comment dois-je faire pour que ce fond reste fixe
dans quel élément doit il être rataché ?

Code :

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

1
2
3
4
5
6
7
8
9
10
 
/*background*/
div#fond{
overflow:auto;
background-image:url(../pages_/img_page/fonds/fond_page.gif);
background-position:center;
background-repeat:no-repeat;
width:712px;
height:602px;
}

En tout cas merci de prendre le temps de me répondre, même si pour l'instant je ne trouve pas la soluce grâce à vous j'avance.

Budyraptor

[budyraptor]

Salut,

Bon ben ça ne fonctionnait pas donc j'ai adopté une autre façon
qui fonctionne, pour ceux que ça interresse voici comment j'ai fait.

j'ai remis ma DIV de fond comme cela dans le CSS

Code :

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

1
2
3
4
5
6
7
8
9
 
/*background massage_relaxant*/
div#fond_massage_relaxant{
background-image:url(../pages_/img_page/fonds/fond_page_massage_relaxant.gif);
background-position:center;
background-repeat:no-repeat;
width:712px;
height:602px;
}

j'ai viré
overflow:auto;
puis
background-attachment:fixed;


ensuite j'ai créer ceci

Code :

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

1
2
3
4
5
6
7
 
/*div pour page avec overflow*/
div#scroll_page{
overflow:auto;
width:712px;
height:600px; /* je réduit la hauteur pour éviter que le texte soit trop pres du bord en haut ou en bas*/
}

puis dans mon html

j'ai insérer celle nouvelle DIV à l'intérieur de la DIV de mon fond comme ceci

Code :

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

1
2
3
4
5
6
 
<div id="fond_massage_relaxant">
      <div id="scroll_page">
            <p> ici mon texte</p>
      </div>
</div>

et voila.

Merci à Candygirl et à FraK