Image plus dégradé en CSS

Des livres incontournables pour tout maîtriser

Auteur
Sam Soul	# 05 Feb 2012, 13:17:00
108 Posts	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) no-repeat, -moz-linear-gradient(0% 75% 90deg,#aaaaaa, #000000);` Modifié par Sam Soul (05 Feb 2012 - 13:22)
108 Posts
fvsch	# 05 Feb 2012, 14:10:41
20100 Posts	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
20100 Posts
Sam Soul	# 05 Feb 2012, 14:17:54
108 Posts	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 ?
108 Posts
Raphael	# 05 Feb 2012, 15:16:35
twitter.com/goetter Administrateur 12067 Posts	Sam Soul a écrit : Ça fonctionne mais comment stopper la répétition de l'image ? Hello, Avec un `background-repeat: no-repeat` Dès le matin, j'ai la tête dans le flux !
twitter.com/goetter Administrateur 12067 Posts
Sam Soul	# 05 Feb 2012, 15:18:11
108 Posts	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)
108 Posts
Sam Soul	# 05 Feb 2012, 15:26:49
108 Posts	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)
108 Posts
fvsch	# 05 Feb 2012, 18:29:00
20100 Posts	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?
20100 Posts
Prévenir un modérateur