Adapter le margin-bottom en fonction du redimensionnement de l'image

Bonjour à toutes et tous,

Je vous expose mon problème du jour avec un exemple consultable ici : https://jsfiddle.net/0cvns7bv/

Le principe assez simple est d'avoir un fond à une div, ici une image par exemple, et d'avoir par dessus une image avec fond transparent... mais l'image doit déborder du fond pour finir sur la suite de la page.
Si à ce point vous n'avez pas encore été faire un tour sur l'exemple, vous devriez me dire que je ne suis pas clair.

Donc, si vous avez vu l'horreur que j'ai créé, j'arrive à m'amuser pour réaliser tout cela... puis je me demande comment peut-on le faire en mieux éventuellement, et surtout comment avoir quelque chose d'adapté quelque soit l'écran du visiteur tout en gardant ce positionnement correct quand l'image est réduite automatiquement... si cela est faisable.

Pour avoir une idée du défaut à corriger, il suffit de modifier la largeur sur l'exemple pour voir que les convives du repas se sauvent trop bas

Là je cale un peu, je suis en manque d'inspiration, si quelqu'un a une idée, je suis preneur... j'avais juste envie en ce jour d'aborder le concept pour moi voir ce qu'il est possible de faire dans ce genre de situation

Merci pour votre aide et vos idées

Bonjour,

Une piste : afin de mieux contrôler le rendu de l'image de fond je la mettrais en background-image avec un background-size sur une div avec un ratio défini non pas par un height mais par un padding-bottom. Exemple pour des images de taille complètement différentes à la base : Photoblog

Principe du ratio sur une div :

.ratio-16-9 {
    padding-bottom: 56.25%;
}

Exemples de ratios différents et styles de ces ratios (ce code est en Stylus, en CSS il faut rajouter les accolades, les points virgules et tout le bataclan...).
Modifié par Olivier C (02 Nov 2016 - 06:08)

Bonjour

Je retiens l'idée du ratio pour éventuellement plus tard, mais pour mon problème de l'image du dessus (celle dans l'exemple avec les gens attablés) je ne vois pas ce que cela peut améliorer.
L'image de fond est ici juste un prétexte pour illustrer l'idée, cela pourrait être aussi un simple background-color : red.

Le but du jeu est d'arriver à avoir une image "au-dessus" intégrant une ligne/rupture (genre les convives à table) et d'avoir une séparation visuelle entre le fond sous une partie de l'image et le reste de la page avec le reste de l'image (dans l'exemple on pourrait croire que l'image "sort" du cadre au niveau de la table des convives) et d'arriver à garder cette aspect visuel (quelque soit la taille de l'écran de l'utilisateur et les éventuelles réductions de cette image, max-width:auto) sans pour autant devoir créer deux images...

C'est tordu, mais voilà, c'était l'idée saugrenue du 1er novembre...

Bonjour,

apparement ce serait plutôt transform:translatey(x); qu-un margin-bottom: -76px; qu'il te faut utiliser ici: https://jsfiddle.net/0cvns7bv/3/

Pour les z-index, il vaut mieux évitè d'en mettre partout en laissant d'abord faire le navigateur et position(=>Voir gradient en bg ajouter sur le dernier morceau de texte pour illustrer l'idée).

Cdt

J'aime bien l'idée du transform:translatey(x);, j'aurais du y penser...

Tout cela me paraît intéressant, j'aime bien l'approche, je vais regarder du côté du rendu sur les différents navigateurs sous la main.

Merci