CSS, background-image et background color

Fermé
Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 - 11 août 2010 à 07:12
Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 - 11 août 2010 à 14:03
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.


A voir également:

2 réponses

avion-f16 Messages postés 19244 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 17 avril 2024 4 496
11 août 2010 à 13:29
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 :
<div id="contenu_top"></div>
<div id="contenu">
    Blabla<br/>
    Blabla<br/>
    Blabla<br/>
    Blabla<br/>
    Blabla<br/>
</div>

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

#contenu {
    background: white;
}
0
Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
11 août 2010 à 14:03
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
0