Problème de dégradé en CSS3 + png transparent

Bonjour à tous,

je suis en train de coder un site en html 5 / css 3 en ce moment et j’ai un problème d’affichage d’image de fond :
j’utilise pour couleur de fond de mon body un dégradé en css3 avec par dessus une image png 24bits avec de la transparence. J’ai aussi une couleur de fond normale pour remplacer le dégradé pour les navigateur qui ne le gère pas.

Mon problème est que je n’arrive pas à avoir mon dégradé + le png qui affichent en même temps, je n’arrive qu’a avoir la couleur de fond normale et le png.

Voilà mon css :

body {
	height: 95%;
	display: block;
	position: relative;
	text-align: center;

	background-color: -webkit-gradient( /*pour chrome*/
        linear,
        left bottom,
        left top,
        color-stop(0.2, #66CC99),
        color-stop(0.9, #CCFFCC)
	);

	background-color: -moz-linear-gradient( /*pour FF*/
        center bottom,
        #66CC99 20%,
        #CCFFCC 90%
	);

	background-color: #66CC99; /*pour les vieux browsers*/
	background-image: url(../images/site/fondbambou.png);
}

Si quelqu’un à une idée, je suis preneur ^^

Merci

Yo,

Je commencerais par l’image, puis le dégradé, puis le fallback.

L’ordre est important !

Dis-moi si ça marche.

Tcho !

C’est normal ton dernier background-color: #66CC99 prend le dessus sur les autres, tu dois le mettre avant les dégradés.

oui j’ai pensé à l’envers, j’aurais dû prendre ma douche avant de répondre :innocent:

Mais en y reflechissant, je pense que tu pourras pas passer ton image séparément du fallback. Essaye de les mettre dans une seule instruction.

Il me semble que tu vas avoir un autre problème: tes background color spécialisés par browsers se “mangent” entre eux.

Je crois que si tu mets la spec pour webkit puis mozilla, ca va marcher pour mozilla, mais pas pour webkit (il va tomber sur le second background color pour mozilla, ne pas le comprendre, et annuler les modifications).

A vérifier. (La solution étant, je crois de stacker toutes les propriétés dans la même règle)

Note: Ce problème n’intervient pas avec les règles css personnalisées de type -moz-box-shadow, etc.

Non c’est prévu pour.
http://gradients.glrzad.com/

Bon en mettant avant les dégradés ça marche pas mieux et en plus la couleur de fallback ne s’affiche plus sous IE8 ^^

body {
	height: 95%;
	display: block;
	position: relative;
	text-align: center;
	
	background-color: #66CC99; /*pour les vieux browsers*/

	background-color: -webkit-gradient( /*pour chrome*/
        linear,
        left bottom,
        left top,
        color-stop(0.2, #66CC99),
        color-stop(0.9, #CCFFCC)
	);
	
	background-color: -moz-linear-gradient( /*pour FF*/
        center bottom,
        #66CC99 20%,
        #CCFFCC 90%
	);
	
	background-image: url(../images/site/fondbambou.png);	
}

Sinon, question du gros noob que je suis : si je met mes instructions de gradient dans une règle à part, comment je l’applique à body ? je lui colle un id ?

Essaye ça :

[code]
body {
body {
height: 95%;
display: block;
position: relative;
text-align: center;
background: #66CC99 url(…/images/site/fondbambou.png);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(102,204,153)),
color-stop(0.9, rgb(204,255,204)) url(…/images/site/fondbambou.png)
);
background: -moz-linear-gradient(
center bottom,
rgb(102,204,153) 2%,
rgb(204,255,204) 90% ²
url(…/images/site/fondbambou.png));

}
}[/code]

Si tu veux tes gradients séparés, tu fais une classe:

.degrade{
ton code
}

et tu l’appliques à ton body:

Si l’image n’apparait pas, tu fais une div supplémentaire, ce sera plus flexible et tu te prends pas la tête.

Sinon si tu as une image de ce que tu veux faire, ça peut aider :rolleyes:

Bon j’ai trouvé pour FF (et normalement chrome mais pas testé)

body {
	height: 95%;
	display: block;
	position: relative;
	text-align: center;
	background-color: #66CC99; /*fallback*/
	
	/*pour firefox*/
	background-image: url(../images/site/fondbambou.png), -moz-linear-gradient(
    center bottom,
    #66CC99 20%,
    #CCFFCC 90%
	);
	
	/*pour chrome*/
	background-image: url(../images/site/fondbambou.png), -webkit-gradient( /*pour chrome*/
    linear,
    left bottom,
    left top,
    color-stop(0.2, #66CC99),
    color-stop(0.9, #CCFFCC)
	);
}

Merci votre aide :slight_smile: