[Résolu] Problème linear-gradient + image dans un background

Bonjour,

Je souhaiterais créer une DIV avec un dégradé et un motif PNG qui se répète horizontalement en bas, le tout en background.

Dans le CSS de ma DIV, j'ai mis :

background: linear-gradient(blue, pink) url("images/background.png") repeat-x bottom;

Malheureusement, ni le dégradé dans le fond, ni le motif PNG n'apparaissent, tout reste blanc.

Par contre, si je supprime le dégradé et que je mets juste une couleur à la place, tout fonctionne :

  background: blue url("images/background.png") repeat-x bottom;

Quelqu'un a-t-il une idée d'où ce problème peut venir ?

Merci par avance
Modifié par miaoumix75 (08 Jun 2024 - 18:10)

Merci pour cette solution.
J'ai trouvé une méthode qui fonctionne sans avoir à créer une image qui contient le dégradé avec le le motif.
En fait , il faut indiquer dans le background l'URL des motifs AVANT le dégradé.
Je pense qu'il faut commencer par le 1er plan, puis le plan derrière, et ainsi de suite si on veut en mettre plusieurs.
Ça donne ceci (avec une virgule que j'avais oubliée entre l'URL et le dégradé) :

  background: url("images/background.png") repeat-x bottom, linear-gradient(blue, pink);

C'est pas de jeu, j'étais en train d'écrire
C'est précisément ça, l'ordre de déclaration. On en parle ici :
https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element
"It should be noted that the first defined image will be topmost in the stack. In this case, the image is on TOP of the gradient."
On en parle aussi ici, dans une langue plus proche de nous :
https://www.alsacreations.com/tuto/lire/814-css3-background-image-multiple.html

Merci pour les articles