Morning all! In the Media section you can [set image focal points](https://docs.umbraco.com/umbraco-cms/tutorials/editors-manual/media-management/cropping-images) which set the center point for image resizing, to my current understanding 🪄 by magic 🪄 How does this actually work? Where is the x/y co-ordinates of this property being set? How does this property then work with the CSS to define what parts of the image should be viewed? The reasoning behind this question, aside from wanting to understand the magic, is that I wanted a full viewport height image (Snippet 1) to display on a page which adhered to this focal point. However, using the

background-image

style of a

div

ignores this focal point. Snippet 1: full viewport height image, ignores focal point

<div class="bg-image" style="background-image: url('@imgUrl'); height: 100vh"></div>

I spent a short while looking in the database to find where the focal co-ordinates would be stored, more for my own interest, but couldn't find them. TIA! Rich

So the focal point of the image is only used for cropping as far as I know. When you generate a URL, the focal point is passed in the query string as a parameter. When the image cropper changes your image, it calculates a rectangle, the box of the image that it should generate. When your crop mode is set to crop (that is: part of your image gets cut off), it will attempt to place this box onto the image with the center of the box as close to the focal point as possible, but not outside the bounds of the image. So if you imagine the image cropper as a cookie cutter, the focal point is the center point of the cookie cutter when it presses into your dough that is the image. But since you don't want to serve half-cookies, your space of movement is constrained to the bounding box of the image.

My mistake was to read this just before lunch and am now more hungry

For your specifik usecase, you can "extract" the focal point and use it the set your background position. The media picker (

MediaWithCrops

) has a LocalCrops property, which is an

ImageCropperValue

(the umbracoFile property on the media item is the same). In this ImageCropperValue, there is a property called FocalPoint, which contains properties for Top and Left. Note, these are decimals, so to get them working with a background position, you need to multiply by 100. eg.

style="background-position: @(media.LocalCrops.FocalPoint?.Top ?? 0.5 * 100)% @(media.LocalCrops.FocalPoint?.Left ?? 0.5 * 100)%"

OH. Well that's just awesome.

I think you can specify a decimal with a literal using letter 'd' iirc. 0.5d would it be then

Perfect, couldn't find "m" last night, ty!