Sélection

Dans les pages précédentes, sur les images de fond, nous avons vu comment faire une sélection ronde ou rectangulaire, pour l'animer au survol; ce principe peut-être utilisé pour ne conserver qu'une partie précise d'une grande image, sans animation, ce que nous faisons souvent par un logiciel de traitement d'image.
Par l'attribut "background-position": vous déterminez quelle partie vous voulez conserver, centrée ou non dans la grande image.

Pas besoin de code CSS puisque nous n'appliquons pas d'animation au survol.
<p style="width: 440px; height: 440px; border: 6px ridge white; box-shadow: 4px 4px 8px black; background: url('https://ekladata.com/slBCvBQaFMRMOCPsxArWoqXYRCU.jpg'); background-position: 50% 50%; transform: translate(140px,50px);">&nbsp;</p>

On applique les décorations et le positionnement que l'on souhaite, à la sélection.

<p style="width: 440px; height: 440px; border-radius: 50%; border: 6px ridge white; box-shadow: inset 6px 6px 12px 5px white, inset -6px -6px 12px 5px black, 4px 4px 8px black; background: url('https://ekladata.com/ob-fgq-xw2tN3uUQM0NT9iFuJKo.jpg'); background-position: 50% 50%; transform: translate(140px,50px);">&nbsp;</p>