28133 sujets

CSS et mise en forme, CSS3

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 Smiley smile upload/1717862320-84019-div.jpg
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)
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 Smiley confus
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