<p>While we’re piggybacking, here’s a snippet that goes one step further and generates the necessary CSS to position an untransformed image:</p>



<pre class="lang-html prettyprint-override"><code>{% set img = entry.headingImage.one %}

{% if img %}
    {% set imgStyles = "background-image: url('" ~ img.getUrl() ~ "');"|raw %}

    {% if img.hasFocalPoint %}
        {% set x = img.focalPoint | first * 100 ~ '%' %}
        {% set y = img.focalPoint | last * 100 ~ '%' %}
        {% set imgStyles = imgStyles ~ ' background-position: ' ~ [x, y]|join(' ') %}
    {% endif %}
{% endif %}

&lt;div class="block-header" style="{{ imgStyles is defined ? imgStyles }}"&gt;
    &lt;h1&gt;Mmm, backgrounds&lt;/h1&gt;
&lt;/div&gt;
</code></pre>

CC BY-SA 4.0
2019-02-12T13:38:18.490Z
Length values in CSS are space separated, not comma separated. Join(',') would make the browser disregard the second value. You should use join(' ') instead.
nordhagen
CC BY-SA 4.0
2019-02-12T15:38:30.400Z
Good catch. I think I managed to overlook that as the X axis was all that was relevant to my implementation and browsers seem to respect that initial value despite the comma.
Dom Stubbs
CC BY-SA 4.0
2019-03-11T04:16:44.580Z
Just be aware that this method doesn't necessarily keep the focal point in the centre. For example, setting a focal point along the x-axis of `0.1` might actually require a background-position of 0% (not 10%) to keep it closest to the centre. It requires some more complex math to get it properly correct. Although for many cases this is "good enough".
Simon East
CC BY-SA 4.0
2021-12-21T08:50:09.370Z
For the record, this CSS Tricks article seems like it has the key to figuring out the exact BG position values given a desired focal point: https://css-tricks.com/focusing-background-image-precise-location-percentages/
Still working on how to convert this to Twig. Unfortunately, it may also need JS for fluidly-sized elements.
Sandwich
CC BY-SA 4.0
2018-10-26T16:20:24.903Z
2019-02-12T15:43:53.117Z
2019-02-12T15:43:53.117Z
Dom Stubbs
<p>To piggyback off Brad, Focal Points tell craft where to crop the image but can also be used to position background images. </p>

<p>Here's how you can get focal point positions: </p>

<pre><code>  {% if slide.backgroundImage.one.hasFocalPoint %}
    {% set x = slide.backgroundImage.one.focalPoint | first %}
    {% set y = slide.backgroundImage.one.focalPoint | last %}
    {{ x }}, {{ y }}
  {% endif %}
</code></pre>

<p>This will return the focal point position at a decimal (ie .32, .55)</p>

CC BY-SA 4.0
2018-12-10T15:58:13.067Z
To get this working with CSS you need to multiply the number by 100 and add % after the number.
mateostabio
CC BY-SA 4.0
2018-10-05T14:57:23.160Z
2018-10-05T14:57:23.160Z
Matthew Rotter
<p>Focal points are used mainly for when Asset transforms (i.e. cropping) are performed in Craft.  They tell Craft where it should focus on the image when performing these actions.</p>

CC BY-SA 4.0
2018-07-10T15:48:35.307Z
How would one get the focal point data (presumably as an X/Y in percentages) in a template? Is it `assetFieldName.getFocalPoint()`? (as a non-programmer, I find the Craft 3 Classes docs _very_ confusing for purposes of templating...)
Sandwich
CC BY-SA 4.0
2018-08-24T10:23:20.413Z
I would like to know this as well...
outline4
CC BY-SA 4.0
2018-08-30T09:38:47.050Z
Here it is! https://docs.craftcms.com/api/v3/craft-elements-asset.html#property-focalpoint
Luke Pearce
CC BY-SA 4.0
2018-10-05T15:50:57.093Z
@Sandwich {% if slide.backgroundImage.one.hasFocalPoint %}
    {% set x = slide.backgroundImage.one.focalPoint | first %}
    {% set y = slide.backgroundImage.one.focalPoint | last %}
    {{ x }}, {{ y }}
  {% endif %}
Matthew Rotter
CC BY-SA 4.0
2018-06-04T22:47:37.770Z
2018-06-04T22:47:37.770Z
Brad Bell
<p>How do image focal points work in Craft 3? I see the dot in the CP, but I'm unable to set the focus.</p>

<image-transforms><craft-pro>
How do image focal points work in Craft 3?
# How do image focal points work in Craft 3?

(Asked by: username_0 on 2018-06-04)

How do image focal points work in Craft 3? I see the dot in the CP, but I'm unable to set the focus.

**Tags:** image-transforms, craft-pro

---

## 3 answers

### Answer by username_7 on 2018-06-04. Score: 6 | Accepted answer

Focal points are used mainly for when Asset transforms (i.e. cropping) are performed in Craft. They tell Craft where it should focus on the image when performing these actions.

> **Comments:**
> **username_4**: How would one get the focal point data (presumably as an X/Y in percentages) in a template? Is it `assetFieldName.getFocalPoint()`? (as a non-programmer, I find the Craft 3 Classes docs _very_ confusing for purposes of templating...)  
> **username_8**: I would like to know this as well...  
> **username_9**: Here it is! https://docs.craftcms.com/api/v3/craft-elements-asset.html#property-focalpoint  
> **username_5**: @Sandwich {% if slide.backgroundImage.one.hasFocalPoint %}     {% set x = slide.backgroundImage.one.focalPoint | first %}     {% set y = slide.backgroundImage.one.focalPoint | last %}     {{ x }}, {{ y }}   {% endif %}  

---

### Answer by username_1 on 2018-10-26. Score: 13

While we’re piggybacking, here’s a snippet that goes one step further and generates the necessary CSS to position an untransformed image:
{% set img = entry.headingImage.one %}

{% if img %}
    {% set imgStyles = "background-image: url('" ~ img.getUrl() ~ "');"|raw %}

    {% if img.hasFocalPoint %}
        {% set x = img.focalPoint | first * 100 ~ '%' %}
        {% set y = img.focalPoint | last * 100 ~ '%' %}
        {% set imgStyles = imgStyles ~ ' background-position: ' ~ [x, y]|join(' ') %}
    {% endif %}
{% endif %}


    Mmm, backgrounds

> **Comments:**
> **username_2**: Length values in CSS are space separated, not comma separated. Join(',') would make the browser disregard the second value. You should use join(' ') instead.  
> **username_1**: Good catch. I think I managed to overlook that as the X axis was all that was relevant to my implementation and browsers seem to respect that initial value despite the comma.  
> **username_3**: Just be aware that this method doesn't necessarily keep the focal point in the centre. For example, setting a focal point along the x-axis of `0.1` might actually require a background-position of 0% (not 10%) to keep it closest to the centre. It requires some more complex math to get it properly correct. Although for many cases this is "good enough".  
> **username_4**: For the record, this CSS Tricks article seems like it has the key to figuring out the exact BG position values given a desired focal point: https://css-tricks.com/focusing-background-image-precise-location-percentages/ Still working on how to convert this to Twig. Unfortunately, it may also need JS for fluidly-sized elements.  

---

### Answer by username_5 on 2018-10-05. Score: 3

To piggyback off Brad, Focal Points tell craft where to crop the image but can also be used to position background images. 
Here's how you can get focal point positions: 
  {% if slide.backgroundImage.one.hasFocalPoint %}
    {% set x = slide.backgroundImage.one.focalPoint | first %}
    {% set y = slide.backgroundImage.one.focalPoint | last %}
    {{ x }}, {{ y }}
  {% endif %}

This will return the focal point position at a decimal (ie .32, .55)

> **Comments:**
> **username_6**: To get this working with CSS you need to multiply the number by 100 and add % after the number.  

---

