[Résolu] Dégradé sur background image

Bonjour,

J'ai utilisé la commande avec et sans lien vers l'image mais au moment d'afficher ma page, je devine que mon dégradé est bien présent mais ensuite le visuel en BG passe par dessus... ou le remplace, mais mon dégradé ne passe pas sur l'image.

J'ai donc utilisé :

.home-row {
background: linear-gradient(135deg, red,30%, transparent) url("/img/monimage.jpg");
}

et sans URL vers l'image

.home-row {
background: linear-gradient(135deg, red,30%, transparent);
}

Salut,

Il manque une virgule entre le dégradé et l'image.

background: linear-gradient(135deg, red,30%, transparent), url("/img/monimage.jpg");

Modifié par _laurent (02 Jun 2020 - 14:11)

Oui, merci beaucoup pour cette correction. Ça fonctionne parfaitement .

Après, j'utilise dans mon site Wordpress un metteur en page (WpBakery) qui permet d'ajouter des background avec parallax, l'image est donc intégrée depuis l'option dédiée.

Mais dans ce cas, mon dégradé s'affiche juste avant que le visuel le recouvre. Ce qui suppose que dans mon CSS, j'utilise alors l'option 2, soit sans URL image, dans la mesure où l'image est déjà présente.

Bref, j'ai conscience qu'on sort un peu des problématiques CSS "standards" mais y aurait un test qui permette de tenter de contourner ce pb ?

Salut,

J'ai beau relire j'arrive pas à comprendre. Tu insère ton image avec wpBakery pour le parralaxe ca c'est bon. Ton gradient tu veux le rajouter en CSS en plus de cette image c'est ca ? Qu'est-ce que tu veux contourner ?

Pas sur non plus mais attention, si tu définis 2x "background: …", il n'y en a qu'un qui s'applique et qui va écraser l'autre. Tu dois bien utiliser une virgule pour en définir deux.

Désolé mon explication n'est pas très claire je reconnais. En fait, j'utilise Wpbakery mais qui intègre en plus les fonction d'un plugin "Ultimate addons" qui permet des background en parallax avancés.

Un fois la photo en BG intégrée, j'aurais souhaité pouvoir ajouter par dessus un dégradé (blanc à transparent) en CSS. Hors, mon dégradé s'applique bien mais en dessous de la photo.

Et même si j'utilise un CSS qui intègre la photo, à supposer que je renonce au plugin, soit

background: linear-gradient(135deg, red,30%, transparent), url("/img/monimage.jpg");

le résultat est toujours le même dans WPBakery et donc, le dégradé en dessous...

ta mis un z-index???

Ok c'est plus clair merci,

goudurisc a écrit :
Un fois la photo en BG intégrée, j'aurais souhaité pouvoir ajouter par dessus un dégradé (blanc à transparent) en CSS. Hors, mon dégradé s'applique bien mais en dessous de la photo.

- Si tu appliques le gradient sur le même élément il va être écrasé comme le dit Yordi
- Si tu appliques le gradient sur le parent, l'image va venir par dessus. Exemple : https://jsfiddle.net/undless/348s2Lkz/1/ (ca expliquerait pourquoi tu le vois au début)
- il faudrait que tu le rajoutes avec un pseudo élément par exemple : https://jsfiddle.net/undless/348s2Lkz/4/

goudurisc a écrit :
Et même si j'utilise un CSS qui intègre la photo, à supposer que je renonce au plugin, soit

background: linear-gradient(135deg, red,30%, transparent), url("/img/monimage.jpg");

le résultat est toujours le même dans WPBakery et donc, le dégradé en dessous...

Non normalement c'est dans le bon ordre : https://jsfiddle.net/undless/bpvfcsq6/1/
Modifié par _laurent (03 Jun 2020 - 14:27)

ou tu met une position absolute avec un z-index?!nan

ok sorry j'avais pas bien compris le truc le z-index n'a rien avoir ici...

Merci beaucoup Laurent pour tous tes exemples. Au final, si j'ajoute un pseudo élément, ça donnerait :

.home-row::after {
   background: linear-gradient(135deg, red,30%, transparent)!important;
}

mais si c'est le cas, ça ne fonctionne toujours pas

Pourquoi mettre un !important ?
Ton site n'est pas en ligne qu'on puisse voir ? Sinon il faudrait voir le code qui affiche l'image.

Ymer62 a écrit :
ok sorry j'avais pas bien compris le truc le z-index n'a rien avoir ici...

Hahah si si ça peut Ymer62 mais ca implique qu'il ait mis le gradient sur un élément frere et je pense pas que c'était le cas pour le moment.
Modifié par _laurent (03 Jun 2020 - 16:15)

Ok comme, je propose un accès provisoire :

S'IDENTIFIER :

La photo est celle d'entête et le dégradé est à ajouter dans l'angle haut gauche à 45°
Actuellement, le dégradé est ajouté dans Photoshop, pas idéal...
Modifié par goudurisc (12 Jun 2020 - 15:40)