je galère un peu l’utilisation du filtre |adaptive_images_background.
Comme le code génère un qui n’a pas de hauteur mais un padding-bottom (pour adapter l’image de fond), je n’arrive pas à l’avoir comme je veux en fond (d’une page entière par exemple) :
l’image n’est pas centrée verticalement
sur écran étroit, l’image ne s’adapte pas verticalement
Pour voir ce que ça donne :
Je m’attendais à pouvoir positionner l’image sur un div du squelette (filtre qui applique automatiquement l’image en background de ce div) et donc dimensionner ce bloc et son image de fond. Bref, il y a un truc qui m’échappe, mais je ne vois pas quoi…
Perso je mettrai le #accueil-background en relative et #accueil-background adapt-img-wrapper en absolute; top:0 bottom:0; position: absolute;top: 0;bottom: 0;padding: 0;height: unset;
Mais je suis pas certain que ça soit la meilleur pratique
je galère un peu l’utilisation du filtre |adaptive_images_background.
Comme le code génère un qui n’a pas de hauteur mais un padding-bottom (pour adapter l’image de fond), je n’arrive pas à l’avoir comme je veux en fond (d’une page entière par exemple) :
l’image n’est pas centrée verticalement
sur écran étroit, l’image ne s’adapte pas verticalement
Je m’attendais à pouvoir positionner l’image sur un div du squelette (filtre qui applique automatiquement l’image en background de ce div) et donc dimensionner ce bloc et son image de fond. Bref, il y a un truc qui m’échappe, mais je ne vois pas quoi…
Perso je mettrai le #accueil-background en relative et #accueil-background adapt-img-wrapper en absolute; top:0 bottom:0; position: absolute;top: 0;bottom: 0;padding: 0;height: unset;
Oui pourquoi ? Quelle est ta démarche qui amène à ce conseil ?
JLuc
Mais je suis pas certain que ça soit la meilleur pratique
Le mer. 21 oct. 2020 à 11:55, jeanmarie <jeanmarie.listes@cousumain.info <mailto:jeanmarie.listes@cousumain.info>> a écrit :
Salut,
je galère un peu l'utilisation du filtre /|adaptive_images_background/.
Comme le code génère un <span> qui n'a pas de hauteur mais un padding-bottom (pour adapter l'image de fond), je
n'arrive pas à l'avoir comme je veux en fond (d'une page entière par exemple) :
* l'image n'est pas centrée verticalement
* sur écran étroit, l'image ne s'adapte pas verticalement
Je m'attendais à pouvoir positionner l'image sur un div du squelette (filtre qui applique automatiquement l'image en
background de ce div) et donc dimensionner ce bloc et son image de fond. Bref, il y a un truc qui m'échappe, mais je
ne vois pas quoi...
Si vous avez des exemples...
jeanmarie
_______________________________________________
liste spip
spip@rezo.net <mailto:spip@rezo.net> - désabonnement : envoyer un mail à spip-off@rezo.net <mailto:spip-off@rezo.net>
je pense que JM veut juste profiter des différentes variantes par rapport à leur poids.
Si il souhaite avoir un background plein écran, basé sur la taille du viewport |adaptive_images_background ça ne va pas le faire car l’image à un ratio qui ne correspondra jamais au ratio du viewport et elle va toujours se caler sur un width de 100%.
A priori je dirais que |adaptive_images_background c’est pour générer des vignettes avec des en lieu et place des mais je ne pense pas que ça soit utile pour un full background.
Voila, Bonne nuit
Le ven. 23 oct. 2020 à 23:55, JLuc <jluc@no-log.org> a écrit :
Le 21/10/2020 à 12:19, pierre laszczak a écrit :
Perso je mettrai le #accueil-background en relative et #accueil-background adapt-img-wrapper en absolute; top:0
bottom:0; position: absolute;top: 0;bottom: 0;padding: 0;height: unset;
Oui pourquoi ? Quelle est ta démarche qui amène à ce conseil ?
JLuc
Mais je suis pas certain que ça soit la meilleur pratique
je galère un peu l’utilisation du filtre /|adaptive_images_background/.
Comme le code génère un qui n’a pas de hauteur mais un padding-bottom (pour adapter l’image de fond), je
n’arrive pas à l’avoir comme je veux en fond (d’une page entière par exemple) :
l’image n’est pas centrée verticalement
sur écran étroit, l’image ne s’adapte pas verticalement
Je m’attendais à pouvoir positionner l’image sur un div du squelette (filtre qui applique automatiquement l’image en
background de ce div) et donc dimensionner ce bloc et son image de fond. Bref, il y a un truc qui m’échappe, mais je
ne vois pas quoi…
la taille de l’image se base effectivement sur la largeur de l’écran donc sur mobile, on étire une image qui a la largeur de l’écran sur toute la hauteur de l’écran (ça pixelise)
moins important : l’image n’est pas centré, elles est toujours calée en haut
adaptive_images_background ne semble donc pas être la bonne piste pour ce besoin
