Background-image x 2 + dégradé

Bonjour,

Je cherche à réaliser un background de fond en 3 « étapes » mais j'ai un petit problème dans l'exécution. Voici le résultat attendu, ce sera peut-être plus parlant que des mots.



En gros, on a tout en haut une image puis au milieu, un dégradé pour faire la transition entre la première et la dernière image.

J'ai bien compris le système de cumul des background-url(), linear-gradient etc, mais le problème ici étant de placer le dégradé à partir d'un certain pourcentage (le faire commencer à 40% et le faire terminer à 80%).

Sachant aussi que mes images sont des .jpg (ce qui change la donne) et que le px n'est pas une unité valable pour mon besoin car le fond peut s'étendre en hauteur (% uniquement donc).

Selon vous, y a t-il possibilité de faire ça en une fois ou les pseudo-elements sont obligatoires (notamment pour le dégradé) ?

J'ai créé un petit codepen afin d'illustrer ma manière de faire. Une simple succession d'url et un linear-gradient pour terminer. Sauf qu'il n'y a qu'une seule image qui s'affiche avec le dégradé, comme si la seconde image était ignorée.

https://codepen.io/anon/pen/MvjMZZ

Merci par avance pour votre aide, vos pistes etc.

Pour (peut-être) devancer certaines réponses, je ne peux pas tout exporter en un seul .jpg car le background-size: wrapper cachera le bas de mon background selon les résolutions (car le .jpg sera positionné en background-position: top center). La partie basse du background ne sera donc pas visible.
Modifié par lorraineS (03 Aug 2017 - 20:18)

gcyrillus a écrit :
bonsoir
si tu veut tenter un fondu entre 2 image de fond, de bas en haut, il te faut dessiner le gradient en premier lieu et en gardant des zones translucides.

Pour les images tu peut aussi te servir de background-size pour qu'elles n'apparaissent pas dans la zone reservée à une autre.

exemple https://codepen.io/gc-nomade/pen/mMObWo

Plutôt pas mal, le problème de cette technique étant que le ratio de l'image est complètement détruit (surtout la 2ème image). J'ai essayé d'adapter la chose en mettant en px les hauteurs réelles des backgrounds. Du coup le gradient n'est plus bon.

background: 
      linear-gradient(to bottom, transparent 990px,#56453F, #56453F, transparent 85%),
      url('imageTop.jpg') top center no-repeat,    
      url('imageBottom') bottom center no-repeat;

    background-size: 
      100% 100%, 
      100% 1123px, 
      100% 409px; 

Dans le background-size, j'indique que ma première image fait 1123 de hauteur, et la seconde 409. L'idéale serait donc de dire au linear-gradient: commence un fondu à partir de 990px et termine le 600px avant la fin (les valeurs sont un peu larges pour le fondu). Car en utilisant les % dans le linear-gradient et en fonction de la hauteur de la page, le résultat attendu ne sera pas bon. La dernière image pourra être complètement masquée par le gradient.
Modifié par lorraineS (07 Aug 2017 - 15:29)

Tu as raison. J'ai créé un codepen avec ton code et les bons assets: https://codepen.io/anon/pen/eEvJgb

Avec une hauteur de 2000px on voit bien que les images sont étirées... il faudrait donc garder soit le ratio, ou simplement forcer une hauteur en px comme expliqué dans mon post précédent (la meilleur solution selon moi). Sachant que la hauteur du container pourra varier, faire 1300px comme 3000px. Par contre ta solution de débordement n'est pas envisageable. Les 2 images devront toujours êtres entièrement visibles (ça fait beaucoup de contraintes..), mais ce n'est pas grave si l'image ne s'étire pas sur un écran de 2560px (par exemple). Un background-size: auto/contain est du coup tout à fait possible.

Le rendu est toujours celui mentionné dans mon premier post.
Modifié par lorraineS (07 Aug 2017 - 22:33)