Background : dégradé + image

Bonjour.

Est-il possible de mettre en fond de bloc une dégradé + image ? Toutes mes tentatives ont échoué, mais bien sûr, cela ne prouve pas que cela soit impossible !

En fait j’ai du code CSS isse d’Ultimate CSS Gradient Generator :

background: #d11d28; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff0000 0%, #d11d28 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#d11d28)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ff0000 0%,#d11d28 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ff0000 0%,#d11d28 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ff0000 0%,#d11d28 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ff0000 0%,#d11d28 100%); /* W3C */

J’ai donc essayé de rajouter en dessous :

background-image: url(../images/monImage.png);

de rajouter l’url à l’intérieur de chaque background :

background: url(../images/bg-bloc-urgences.png) linear-gradient(to bottom,  #ff0000 0%,#d11d28 100%); /* W3C */

de faire une seule déclaration de background :

background: #d11d28, /* Old browsers */
  -moz-linear-gradient(top,  #ff0000 0%, #d11d28 100%), /* FF3.6+ */
  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#d11d28)) /* Chrome,Safari4+ */
  -webkit-linear-gradient(top,  #ff0000 0%,#d11d28 100%) /* Chrome10+,Safari5.1+ */
  -o-linear-gradient(top,  #ff0000 0%,#d11d28 100%) /* Opera 11.10+ */
  -ms-linear-gradient(top,  #ff0000 0%,#d11d28 100%) /* IE10+ */
  linear-gradient(to bottom,  #ff0000 0%,#d11d28 100%), /* W3C */
  url(../images/monImage.png);

Donc là je sèche.

Il y a bien sûr la solution de rajouter un bloc interne pour l’image, mais là, c’est de la « triche » !
Modifié par Derwoed (21 Oct 2012 - 19:21)

À mon avis :
- soit il faut réaliser le dégradé avec un logiciel d'image,
- soit utiliser un masque (même si c'est de la triche )

EDIT 2012-10-22: NON ! On peut en css 3. \o/
Modifié par Muchos (22 Oct 2012 - 18:05)

Muchos a écrit :
À mon avis :
- soit il faut réaliser le dégradé avec un logiciel d'image,

Pas possible, le bloc a une taille variable et l’image de fond monImage doit avoir une position fixe qui ne se répète pas.

a écrit :
- soit utiliser un masque (même si c'est de la triche )

Qu’entends-tu par masque ? Rajouter un div ?

Ou sinon tu essaies avec une syntaxe correcte : css3 permet les background-multiples, il faut simplement connaître la syntaxe.

Tu peux lire ceci pour en apprendre plus.

Le seul inconvénient est le support navigateur problématique avec IE8 et inférieur, mais puisque tu emploies des dégradés tu y a certainement songé.

Bonne continuation !

Merci, c’est exactement ce qu’il me fallait. J’avais testé la bonne syntaxe à une exception près : j’avais inversé l’ordre des fonds -> mon dégradé masquait mon image…

Par contre j’ai toujours un soucis avec IE9 (pour les autres j’utiliserai une parade avec des commentaires conditionnels…). IE9 d’après Can I use supporterait les fonds-multiples, pourtant, cela ne fonctionne pas dans mon cas. Une idée ?

Nouveau code :

  background: #d11d28; /* Old browsers */
	background: url(../images/monImage.png) no-repeat 5px 4px, -moz-linear-gradient(top,  #ff0000 0%, #d11d28 100%); /* FF3.6+ */
	background: url(../images/monImage.png) no-repeat 5px 4px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#d11d28)); /* Chrome,Safari4+ */
	background: url(../images/monImage.png) no-repeat 5px 4px, -webkit-linear-gradient(top,  #ff0000 0%,#d11d28 100%); /* Chrome10+,Safari5.1+ */
	background: url(../images/monImage.png) no-repeat 5px 4px, -o-linear-gradient(top,  #ff0000 0%,#d11d28 100%); /* Opera 11.10+ */
	background: url(../images/monImagepng) no-repeat 5px 4px, -ms-linear-gradient(top,  #ff0000 0%,#d11d28 100%); /* IE10+ */
	background: url(../images/monImage.png) no-repeat 5px 4px, linear-gradient(to bottom,  #ff0000 0%,#d11d28 100%); /* W3C */