28172 sujets

CSS et mise en forme, CSS3

[Résolu] Linear gradient + image

Bonjour,

En fond de mes titres de pages, je dois faire un dégradé bleu vers vert + mettre une image de fond avec des points, cf PJ (les points ne sont que sur la gauche)
Quand j'essaie cette CSS, je ne vois pas mes points : 


.fusion-page-title-bar {
 background: linear-gradient(to right, #3480ab, #aec53e), url("/wp-content/uploads/2019/02/fond-dots.png") no-repeat left top ;
  background-size: cover;
}


Comment faire pour que l'image passe au dessous de la couleur sans avoir besoin de passer mes couleurs en rgba avec de la transparence ?

Merci pour votre aide et bonne journée,
Marine upload/1549357052-50580-header.jpg
Bonjour je sais pas si j'ai bien compris, mais si c'est juste une histoire de position d'éléments les sur les autres, as-tu essaye le z-index ? ( ex: " z-index: 1; ")

Je sais pas vraiment si ça va marcher mais ça peut-être une bonne piste pour toi j'espère !
J'ai l'impression que ça peut être ça mais dans la mesure où le linear gradient et l'image sont dans la même ligne css de background, je ne vois pas comment faire pour prioriser l'image sur la couleur.
Est-ce que en faisant ceci ça change quelque chose :


.fusion-page-title-bar {
 background: linear-gradient(to right, #3480ab, #aec53e), url("/wp-content/uploads/2019/02/fond-dots.png") no-repeat left top, z-index-1;
  background-size: cover;
}

Modifié par Sassouquet54 (05 Feb 2019 - 10:34)
Modérateur
Bonjour, lorsque l'on a de multiple backgrounds, c'est le premier de la liste qui se trouve au-dessus, donc si le gradient est au dessus il recouvre tout, il faudrait donc écrire:


.fusion-page-title-bar {
 background: url("/wp-content/uploads/2019/02/fond-dots.png") no-repeat left top, linear-gradient(to right, #3480ab, #aec53e);
  background-size: cover;
}
Meilleure solution
Merci !! J'avais essayé aussi mais comme ma ligne de CSS apparaissait tout verte dans WP comme pour un commentaire, je pensais qu'il y avait une erreur et je ne l'avais pas validée. Merci pour l'astuce et bonne journée
Marine
Sujet clos
Aller à