Cassiopeia : module personnalisé "banner"

[wd_newbie]

Bonjour,

Je tente a grand renfort de tests en css de mettre en place un "banner" avec un module personnalisé dans la position "banner" et une mise en page "banner" dans les paramètres avancés.
Cela donne un texte avec une image de fond fixe. Il y a pas mal de tutos a ce sujet.

Mon souci est que j'aimerais mettre comme background une image avec un sujet du doit rester visible lorsque le site est sur ordinateur et également sur mobile :

Le sujet doit se mettre a gauche en tout temps :



Pour ne pas avoir un trop grand banner, j'ai réduit ce dernier avec :

.container-banner .banner-overlay{
height:30vh;
}
​

Mais j'ai tout essayé (sauf ce qu'il faut j'imagine) pour que mon image reste toujours à sa place (c'est un montage PS ) :



J'ai tenté avec des backgroud-size / backgroud-position (-x / -y) ... rien n'y fait .... soit l'image est trop grande, soit elle ne remplit pas tout l'espace ou se répète ...

LK'image à la base est de 250 x 1900px pour assurer la largeur, mais ... rien n'y fait !

Une idée ?

[Fred2FR3]

Bonjour,
Avez vous testé en html :

 <img src="..." class="img-fluid" alt="...">​

Doc BS : https://getbootstrap.com/docs/5.3/content/images/

[RobertG]

Bonjour,

Habituellement, par défaut l'image s'adapte automatiquement.
Au besoin, une largeur de 100% et une hauteur auto peuvent être définies, sans besoin de forcer un style.
A moins que je n'ai pas bien compris la question.

[lomart]

Bonsoir,

Une suggestion, utiliser un module perso avec cette action UP https://up.lomart.fr/demo/action-bg-image
La demo montre les possibilité d'adaptation selon la taille de l'écran