[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)

salut
c'est normal, un dégradé est considéré comme un background-image
il faudra faire une image qui contient le dégradé et les triangles.

la fonction non-raccourcie pour un dégradé de fond est
background-image: linear-gradient...
Modifié par drphilgood (09 Jun 2024 - 14:08)

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