Arrière plan - Dégradé

**Gwen_59** · 14/08/2012, 13h00

Bonjour,

Je rencontre un souci à propos d'un fond dégradé que je veux mettre en arrière plan sur mon site. Je débute en CSS, et j'ai trouvé ce site : http://www.colorzilla.com/gradient-editor/
J'ai pris le code CSS correspondant que j'ai appliqué sur la balise body de mon site.
Seulement, et c'est logique, le fond s'adapte au contenu de la balise body. Ce qui fait que, s'il y a peu de contenu, le fond dégradé s'arrête et j'ai une bande blanche pour compléter le reste de la page. J'espère être clair (sinon je prendrai un screenshot).

Comment faire ?

Merci d'avance.

**Torgar** · 14/08/2012, 15h17

Salut,

Tu pourrais commencer par poster ton code, ça nous aiderais grandement.

**Candygirl** · 14/08/2012, 16h58

Bonjour,

Rajouter ceci dans ton css devrait résoudre ton problème:

Code :

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

1
2
3
html {height:100%;}
 
body {min-height:100%;}

**Muchos** · 14/08/2012, 20h35

Ç'aurait été plus logique comme ça, non ?

Ce qui fait que, s'il y a beaucoup de contenu, le fond dégradé s'arrête et j'ai une bande blanche pour compléter le reste de la page.

**Gwen_59** · 15/08/2012, 11h51

Envoyé par Candygirl

Code :

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

1
2
3
html {height:100%;}
 
body {min-height:100%;}

En rajoutant ça, cela arrange le problème précédent. Mais désormais, comme Muchos le dit, quand j'ai beaucoup de contenu, le dégradé commence à se répéter...

Voici mon code :

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
body {
font: 13px verdana, sans-serif;
background: #f0f9ff; /* Old browsers */
background: -moz-linear-gradient(top,  #f0f9ff 0%, #cbebff 34%, #a1dbff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(34%,#cbebff), color-stop(100%,#a1dbff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f0f9ff 0%,#cbebff 34%,#a1dbff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f0f9ff 0%,#cbebff 34%,#a1dbff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f0f9ff 0%,#cbebff 34%,#a1dbff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f0f9ff 0%,#cbebff 34%,#a1dbff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */
min-height: 100%;
}
html{
height:100%;
}
#contenu {
	margin:auto;
	width:700px;
}
.global {
		position:relative;
		text-align:left;
		height:auto!important;
		min-height:100%;
		height:100%;
		width:1200px;
		margin:0 auto;
		border-left: #e0e0e0 solid 5px;
		border-right: #e0e0e0 solid 5px;
	}
#header {
		width:889px; /* taille de l'image inseree dans le html */
		height:366px;/* taille de l'image inseree dans le html */
		margin:auto;/* centrage de l'image */
}

extrait fichier html

Code :

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

1
2
3
4
5
6
7
<body>
<div id="global">
   <div id="header"><img src="./images/logo2.png"></div>
   <div id="onglets"> -----------MENU DEROULANT ---------</div>
   <div id="contenu"> --------CONTENU VARIABLE en fonction des pages du site--------</div>
</div>
</body>

Voilà voilà ...

**Candygirl** · 15/08/2012, 13h58

Tu peux par exemple rajouter un

Code :

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

1
2
3
body {
  background-attachment:fixed;
}

**Muchos** · 15/08/2012, 14h05

[EDIT: Apparemment, il s'agit d'un fond généré en css et non avec une image. Mon post est ici inutile.]

Voici un petit exemple :

Code css :

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

body {background: black url(/mon-image-de-fond) no-repeat scroll 0 0;}

L'image de background est bien placée tout en haut de la page (0 0), et elle se déplace dans la page (scroll). [NOTA: ou alors fixed (voir post précédent) si l'image doit rester accrochée à l'arrière-plan.]
On stoppe la répétition de l'image avec la propriété no-repeat.
L'image de background finit forcément sur une couleur unie. Si c'est du noir, le fond par défaut doit être black. Ainsi, c'est comme si l'image de background se continuait indéfiniment…

**Muchos** · 15/08/2012, 14h25

Après test, la solution de Candy Girl a vraiment l'air de tenir la route :

Code css :

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

1
2
3
4
5
6
7
8
 
/* html {height:100%;} Pas utile sous mon FF14 */
body {
min-height: 100%;
background-attachment: fixed; /* ou `scroll', au choix */
background-image: linear-gradient...
...
}

**Gwen_59** · 15/08/2012, 16h07

En effet, la solution de Candy Girl m'a solutionné mon problème. Je vous remercie beaucoup pour votre aide et vos explications

. Super sympa !

Arrière plan - Dégradé

CSS

Discussions similaires

Partager

Partager