Image plus dégradé en CSS

bonjour
je ne parviens pas dans un même bloc à créer un dégradé en CSS et afficher en plus une image (transparente qui laissera voir le dégradé de fond).

J'ai tenté ce code mais ça ne marche pas :

#footer {
	background:url(../../../images/footer.png) no-repeat 20px 20px, linear-gradient(#fff, #2B386C);
    margin-bottom: 25px;
    padding-top: 15px;
    height: 60px;
	text-align: center;
	color: #1e1912;
	font-size: 13px;
    border-top: 1px solid #fff;
    -moz-border-radius: 0 0 8px 8px;
    -khtml-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
	}

J'ai essayé aussi ceci :

background-image: url(../../../images/footer.png), -moz-linear-gradient(0% 75% 90deg,#aaaaaa, #000000);

mais l'image se répète or si je mets un no-repeat l'image n'apparait plus.

	background-image: url(../../../images/footer.png) [#red]no-repeat[/#], -moz-linear-gradient(0% 75% 90deg,#aaaaaa, #000000);

Modifié par Sam Soul (05 Feb 2012 - 13:22)

Si tu mets une valeur de background-repeat dans une valeur de background-image, pas étonnant que ça ne marche pas.

La première piste avec la propriété background est bonne, mais tu remarqueras que tu as utilise linear-gradient(), là où tous les navigateurs actuels attendent une version préfixée:
http://caniuse.com/css-gradients

J'ai changé et mis ça:

	background: url(../../../images/footer.png), -moz-linear-gradient(top, #2B386C 30%, #fff 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(#2B386C), to(#fff));

Ça fonctionne mais comment stopper la répétition de l'image ?

Sam Soul a écrit :

Ça fonctionne mais comment stopper la répétition de l'image ?

Hello,

Avec un

background-repeat: no-repeat

J'ai déjà essayé, ça n'a strictement aucun effet; l'image se répète :

#footer {
	background: url(../../../images/footer.png), -moz-linear-gradient(top, #2B386C 30%, #fff 100%);
	background-repeat: no-repeat;
	background: -webkit-gradient(linear, left top, left bottom, from(#2B386C), to(#fff));
    margin-bottom: 25px;
    padding-top: 15px;
    height: 60px;
	text-align: center;
	color: #1e1912;
	font-size: 13px;
    border-top: 1px solid #fff;
    -moz-border-radius: 0 0 8px 8px;
    -khtml-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
	}

Modifié par Sam Soul (05 Feb 2012 - 15:26)

Il y avait une erreur de frappe que je viens de corriger.
Par contre ça ne marche pas sous Opéra ni IE, c'est quand même incroyable que leurs développeurs ne se mettent pas à jour.
Sur Chrome, l'image n'apparaît pas, mais les dégradés sont OK.
Modifié par Sam Soul (05 Feb 2012 - 15:40)

Sam Soul a écrit :
Par contre ça ne marche pas sous Opéra ni IE, c'est quand même incroyable que leurs développeurs ne se mettent pas à jour.

Tu réalises que tu as utilisé -moz-linear-gradient(), dédié au moteur de rendu Gecko de Mozilla, et -webkit-gradient(), dédié au moteur de rendu WebKit utilisé par Safari et Chrome (et par ailleurs obsolète vu que remplacé par -webkit-linear-gradient())?

Pour le reste, il me semble que tu n'as pas bien compris la syntaxe des propriétés background-image, background-repeat et background avec les arrières-plan multiples (CSS3). Tu commets des erreurs telles qu'alterner une définition de background et une définition d'image dans une propriété background, ou encore redéfinir background après avoir défini un background-repeat (ce dernier sera écrasé). Peut-être faut-il relire les spécifications ou des tutoriels sur le sujet?