Focus sur un endroit précis d'une image de background

More
2 years 2 months ago - 2 years 2 months ago #67064 by charly54
Bonjour,
On essaie tous d'optimiser ses présentations, pour les versions mobiles de nos pages.
Souvent nos bannières en pleine largeur ont une belle image de background.
Mais en version mobile l'image ne se centre pas sur la plus belle partie de l'image.
Voici les réglages pour positionner (centrer) une image de background d'un container, en version mobile.

Avec ce code CSS qui va positionner le centre de l'image à 38% de la largeur et 30 % de la hauteur de l'image de fond.
background-position: 38% 30%;

Regardez les images jointes, pour comprendre plus facilement ce que je voulais et comment je l'ai réglé via PBCK

PS : quand on est sur un plus grand écran, l'image semble se repositionner en son centre...:)
Donc pas de réglages supplémentaires à faire pour les autres écrans :)
Attachments:
Last edit: 2 years 2 months ago by charly54.

Please Log in or Create an account to join the conversation.

More
2 years 2 months ago #67068 by ced1870
Salut et merci pour ton partage
il faut savoir que tu n'as pas besoin de passer par les css persos, il te suffit de mettre les positions dans les cases prévues à cet effet


CEd

Joomlack Webmaster and Developer
Attachments:
The following user(s) said Thank You: charly54

Please Log in or Create an account to join the conversation.

More
2 years 2 months ago #67074 by charly54
Super Merci pour cette info Cédric
J'avais testé ces champs en mettant des valeurs sans les pourcentages.
Avec des valeurs sans pourcentage l'image se décale en laissant un espace ( et j'ai cru que cela allait faire la même chose avec les pourcentages)

Please Log in or Create an account to join the conversation.

More
2 years 2 months ago #67077 by ced1870
si tu ne mets pas d'unité, alors par défaut c'est en PX

Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Time to create page: 0.217 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 1003 guests and no members online