background doit etre repeter en fonction de la hauteur de l'ecran

**joselito** · 24/09/2009, 13h56

Bien le bonjour

j'ai une div au milieu où il y a un bg et un bg color
le problème est que tout ca ne se repete pas en fonction de la taille de l'ecran
jai mon bg qui fait x de hauteur et normalement quand l'ecran est plus grand c'est ma couleur qui prends le relais, afin de ne pas avoir de blanc quand un ecran est grand

mon code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
.bg {
width:100%;
background-image:url(http://images/bg.jpg);
background-repeat:repeat-x; 
 
height:457px;
background-color:#e8e3df; 
margin:0px;
}

j'ai tenté un truc du style :

Code :

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

1
2
3
4
 
<div style="height:100%;">
<div class="bg">
     <div style="margin:0 auto; width:962px; min-height:600px; height:auto; ">

mais rien n'y fait
ma div du milieu a bien mon degradé en X mais lorsque ma page fait un height > 457px; il y a un blanc et je voudrait qu'il y ait ma couleur background-color:#e8e3df; qui remplace ce blanc

merci beaucoup pour votre aide

**Macmillenium** · 24/09/2009, 14h40

Bonjour,

Pourquoi tu ne mets pas le background directement sur le BODY ?

D'autre part, il faut commencer par attribuer un height:100% au principaux conteneurs : La racine HTML et BODY

Code css :

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

1
2
3
4
 
html, body {
  height:100%;
}

Ensuite, attribuer une hauteur minimale de 100% à l'enfant directe de BODY :

Code css :

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

1
2
 
.bg { min-height:100% }

Voir la FAQ CSS pour comprendre le fonctionnement des hauteurs en %

http://css.developpez.com/faq/?page=...ur_pourcentage

Donc ton code HTML devrait rassemble à ça :

Code html :

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

1
2
3
4
5
6
7
 
...
<body>
<div class="bg">
...
</div>
</body>

Au passage, préfère les propriétés raccourcies :

Code css :

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

1
2
3
4
5
6
7
 
.bg {
width:100%;
background:#e8e3df url(http://dev.zyyne.com/aurelie/images/bg.jpg) repeat-x;
height:457px;
margin:0px;
}

**joselito** · 24/09/2009, 15h06

non parce que c'est le bg d'une de mes div celle du milieu et non le bg de l'ensemble du site

**Macmillenium** · 24/09/2009, 15h19

Dans ce cas utilise la méthode expliquée plus haut.

**joselito** · 24/09/2009, 16h49

en faite dans mon body j'ai dejà ça :

Code :

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

1
2
3
4
 
 
<body style="margin:0; padding:0; background-image:url(http://images/cotegauche2.jpg);
background-repeat:repeat-x; height:137px; border:1px solid #FFFFFF;">

donc ça

Code :

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

1
2
3
4
 
html, body {
  height:100%;
}

je peux pas, non?

**Macmillenium** · 24/09/2009, 17h03

Un height:137px sur le BODY

Montre nous la totalité de ton code HTML/CSS stp.

**joselito** · 24/09/2009, 17h18

huumm ok

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
 
<body style="margin:0; padding:0; background-image:url(images/cotegauche2.jpg);
background-repeat:repeat-x; height:137px; border:1px solid #FFFFFF;">
 
 
         <div style="width:auto;  background-color:#c90d1e; text-align:right; " >
        <span style="padding-right:40px;"><img src="images/english.jpg"/>
        <img src="images/french.jpg"/><img src="images/japan.jpg"/></span>
        <span style="margin-right:170px; color:#FFFFFF; font-size:12px;">Espace client</span>
 
   </div>
<div style="margin:0 auto; width:952px; height:100%; ">
     <div style="float:left; ">
          <div style="background-image:url(images/topleft.jpg);background-repeat:no-repeat;width:490px;height:117px; ">
          </div>
     </div>
     <div style="float:left; width:462px; ">
        <div style="background-image:url(topright.jpg);background-repeat:no-repeat; width:462px;height:93px; line-height:0px;font-size:0px;">
        </div>
 
        	<div style="float:left;background-image:url(encarouge.jpg);
            background-repeat:no-repeat;
            width:118px;
            height:24px;"></div>
            <div style="float:left;background-image:url(onglet7bb.jpg);
            background-repeat:no-repeat;
            width:112px;
            height:24px;"></div>
            <div style="float:left;background-image:url(onglet7bb.jpg);
            background-repeat:no-repeat;
            width:112px;
            height:24px;"></div>
            <div style="float:left;background-image:url(ongletdernierbb.jpg);
            background-repeat:no-repeat;
            width:120px;
            height:24px;"></div>
 
       </div>
 
 
<div style="clear:both;"></div>
 
<div class="bg">
     <div style="margin:0 auto; width:962px; ">
 
    <div style="float:left;">
 
       <div style="width:491px;">
         	<div style="background-image:url(images/imageleft.jpg);
            background-repeat:no-repeat;
            width:491px;
            height:16px; line-height:0px;font-size:0px;">
         	</div>
          	<div><img src="images/book.jpg" /></div>
         	<div class="spacer"></div>
         	<div class="rouge">Avantages</div>
         		<div style="padding-left:25px;">
             		 <span class="marron2">-</span><span class="marron_right">Accessible pour super pas cher nan serieux c'est donn</span>
              		<span class="marron2">-</span><span class="marron">Il parait que Gargamel se cache dans un page flip, serais tu le retrouver dans le site?</span>
            		<div class="spacer"></div>
             		<span class="marron2">-</span><span class="marron_right">On ne sait pas quoi mettre, alors on improvise</span>
             		<span class="marron2">-</span><span class="marron">O est Charlie?</span>
       			</div>
   		</div>
    </div>
 
 
       <div style="float:left; width:450px;">
 
			<p class="rouge_20">les avantages numrique.</p>
 
			<p class="marron3"> transformation de tous vos documents (Word, Excel, Powerpoint, PDF...) accessible, simple et rapide.</p>
			<p class="marron3">Envoyer votre fichier maintenant et consultez-le en ligne quelques instants plus tard, avec son lien spcifique
			que vous pouvez transmettre immdiatement.</p>
 
			<p class="marron3">Faites un essai ds maintenant, pour seulement 249 HT</p>
			<div class="spacer"></div>
			<span style="margin-right:0px;"><img src="images/demo.jpg" /></span>
			<span style="margin-right:130px; margin-left:50px"><img src="images/essai.jpg" /></span>
			<div class="spacer"></div>
			<p class="rouge_20">Ils zyynent :</p>
			<div style="float:left; margin-right:50px;"><img src="images/euromaster.jpg"></div>
			<div style="float:left;margin-right:50px;"><img src="images/oseo.jpg"></div>
			<div style="float:left;"><img src="images/chatelet.jpg"></div>
		</div>
	</div>
 
</div>
 
 
 
 
  </body>

LE CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
.bg {
width:100%;
background-image:url(images/bg.jpg);
background-repeat:repeat-x; 
 
height:100%;
background-color:#e8e3df; 
margin:0px;
}

merci encore

**Macmillenium** · 24/09/2009, 17h55

Externalise ton CSS stp.

Je suppose que le conteneur est la DIV ayant le height:100% ?
Si c'est le cas, il manque la fermeture ;
Enlève le height:137px sur le BODY ;
Attribue un height:100% sur HTML et BODY ;
Sur le conteneur, remplace height:100% par min-height:100% ;
Mets le background directement sur le conteneur et attribue un background-position:0% XXpx; (XXpx = hauteur du header).

Pas d'aide par MP.

**joselito** · 24/09/2009, 18h33

dis moi le conteneur c'est la div générale ou c'est ma div bg?

désolé je debute un peu

car j'ai une div pour le haut et pour le milieu avec le bg c'en est une autre
donc je pense que c'est de la dernière dont tu parles

**joselito** · 24/09/2009, 19h33

j'ai fait ça et ça à l'air de fonctionner

Code :

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

1
2
3
 
<body style="margin:0; padding:0; background-image:url(http://dev.zyyne.com/aurelie/images/cotegauche2.jpg);
background-repeat:repeat-x; height:137px; width:100%;  background-color:#e9e4e0; ">

sur ff ça s'affiche tres bien, ca se repete bien
mais sous ie8, ca ne se repete pas à moins de mettre un border:1px solid #FFFFFF
ce qui 'nest vraiment pas terrible

tu saurais à quoi c'est du? je trouve ça vraiment bizard

background doit etre repeter en fonction de la hauteur de l'ecran

Dimensionnement en CSS

Discussions similaires

Partager

Partager