CSS, background-image et background color Fermé

Question

Bonjour, 

comme vous vous en doutez, j'ai un petit souci :

j'ai une page HTML dans laquelle j'ai une image de fond qui ne répète pas et qui se trouve en haut de mon site.

Par dessus cette image de fond j'ai un DIV sur lequel je voudrais mettre une image de fond qui ne se répète pas non plus, cette image est en png, c'est un dégradé qui va de transparent à blanc.

Jusque là tout va bien ça fonctionne, le problème est que je voudrais que après mon image de fond, le reste du DIV est un fond blanc.

malheureusement si j'ajoute un background-color à mon div, je ne vois plus le dégradé de mon image PNG (logique me direz vous).

Comment faire pour avoir mon dégradé de transparent à blanc puis le reste du DIV en blanc (je ne veux pas utiliser de CSS3, qui n'est pas encore très répandu).

Je vois bien une solution du genre un div avec mon image de fond en PNG, juste en dessous un autre DIV avec un fond blanc et par dessus des 2 DIV, un autre DIV pour le texte mais je trouve ça un peu brouillon.

Quelqu'un aurait il une solution ? est il possible de dire au background-color de commencer à 250px du haut du DIV ?

d'avance merci.

Configuration: Processeur E6600
Geforce 8800 Mx
2Go de Ram
CM : Asus P5B Deluxe

avion-f16 · Answer

Salut. Il faudra créer deux div. Le premier devra être vide. C'est sur celui-ci que tu devras appliquer ton dégradé. Il faudra lui donner une hauteur fixe (celle de ton image). Le second contiendra le contenu, et aura un fond blanc. Par exemple :

Blabla
Blabla
Blabla
Blabla
Blabla

Et dans le CSS :#contenu_top { height: 120px; background: url('degrade.png'); } #contenu { background: white; }

Angelneonizz · Answer

Salut, 

merci pour ta réponse mais je ne veux pas faire ça car dans ce cas mon texte commencera trop bas.

oui je sais je suis chiant ;)

Pour le moment j'ai résolu le problème en utilisant une image de fond (avec mon dégradé) qui a une taille de 2px x 4000px. L'image fait moins de 3Ko

avec un repeat-x et le tour est joué (en espérant que je n'arrive pas à 4001px pour mon div ;) )

Si quelqu'un a une autre solution, ça m'interesse toujours !
merci

CSS, background-image et background color

2 réponses

Discussions similaires