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