Background-position

Background-position

La plupart du temps, le sujet de nos photos est centré mais parfois, il est décalé et nous voudrions le faire apparaître au centre du cadre à nos dimensions.

La page précédente propose une façon de sélectionner une partie d'une image pour la faire apparaître dans un; nous pouvons également placer cette image en fond de cadre de la positionner pour que le sujet soit centré.

Cela peut se faire avec animation ou non et peut s'intégrer dans un montage ou non.

Commençons par le plus simple: une image plus grande que le cadre de façon à pouvoir la déplacer sans dépasser ses bords: voici mon image exemple totale.

Le positionnement de l'image en fond s'écrit: background-position:0% 0%; qui est sa position par défaut.
Le changement de position est ici avec transition, pour l'exemple mais le positionnement peut être fixe, sans transition.
Dans le montage ci-dessous, écrivez, dans la case "Position du fond", les valeurs de votre choix, sous la forme: 50% 50% par exemple.

Positionnement fond

Le premier chiffre est la valeur horizontale: 0% correspond au bord gauche du cadre et 100% à son bord droit.

Le second chiffre est la valeur verticale: 0% correspond au bord haut du cadre et 100% à son bord bas.

Le code, non pas de cette page avec générateur, mais d'un image positionnée selon votre choix serait:

<div id="essai1"> </div>

<style></style>

Ce qui vous donnerait:

Vous pouvez ajouter un agrandissement au survol éventuellement, en précisant la taille de l'image de fond au départ: background-size:180%; et au survol: background-size:220%; ce qui donne:

Dans mon exemple, l'image fait 1920px par 1080px pour un cadre qui, chez moi, fait 1156px par 648px (60%) ce qui explique sa taille au départ de de 150%, pour n'en voir que pratiquement la moitié, centrée selon mes choix.

A l'agrandissement à 220%, elle augment de taille en se déplaçant légèrement, ce que l'on peut corriger ou non.

<div id="essai2"> </div>
<style></style>