Repository: wagtail/wagtail
File: wagtail/images/models.py (Python)

Code before:
        image_focal_point = self.image.get_focal_point()
        if image_focal_point:
            transform = self.filter.get_transform(self.image)
            return image_focal_point.transform(transform)

    @property
    def background_position_style(self):
        """
        Returns a `background-position` rule to be put in the inline style of an element which uses the rendition for its background.

        This positions the rendition according to the value of the focal point. This is helpful for when the element does not have
        the same aspect ratio as the rendition.

        For example:

            {% image page.image fill-1920x600 as image %}
            <div style="background-image: url('{{ image.url }}'); {{ image.background_position_style }}">
            </div>
        """
        focal_point = self.focal_point
        if focal_point:
            horz = int((focal_point.x * 100) // self.width)
            vert = int((focal_point.y * 100) // self.height)
            return f"background-position: {horz}% {vert}%;"
        else:
            return "background-position: 50% 50%;"

    @property
    def background_position_x(self):
        """
        Returns the horizontal background position as a percentage string.

        This positions the rendition horizontally according to the focal point's x coordinate.
        If no focal point is set, defaults to 50% (center).

        Returns:
            str: The horizontal position as a percentage (e.g., "25%")

        This can be passed as a data attribute to client-facing HTML.

        A usage example in the client-facing CSS (to avoid inline styles):
            <div class="my-bg-image" data-background-position-x="{{ image.background_position_x }}">
            </div>

            .my-bg-image {
                background-position-x: attr(data-background-position-x, <number>);
            }
        """
        focal_point = self.focal_point
        if focal_point:
            horz = int((focal_point.x * 100) // self.width)

Review comment (refactor):
We can refactor this (and the above lines) to use the newly added `background_position_x` and `background_position_y`, e.g.

```py
horz = self.background_position_x
vert = self.background_position_y
return f"background-position: {horz} {vert};"
```

Code after:
        image_focal_point = self.image.get_focal_point()
        if image_focal_point:
            transform = self.filter.get_transform(self.image)
            return image_focal_point.transform(transform)

    @property
    def background_position_style(self):
        """
        Returns a `background-position` rule to be put in the inline style of an element which uses the rendition for its background.

        This positions the rendition according to the value of the focal point. This is helpful for when the element does not have
        the same aspect ratio as the rendition.

        For example:

            {% image page.image fill-1920x600 as image %}
            <div style="background-image: url('{{ image.url }}'); {{ image.background_position_style }}">
            </div>
        """
        horz = self.background_position_x
        vert = self.background_position_y
        return f"background-position: {horz} {vert};"

    @property
    def background_position_x(self):
        """
        Returns the horizontal background position as a percentage string.

        This positions the rendition horizontally according to the focal point's x coordinate.
        If no focal point is set, defaults to 50% (center).

        Returns:
            str: The horizontal position as a percentage (e.g., "25%")

        This can be passed as a data attribute to then be used in JavaScript to set the `background-position-x` CSS property instead of using inline styles.
            <div class="my-bg-image" data-background-position-x="{{ image.background_position_x }}">
            </div>
        """
        focal_point = self.focal_point
        if focal_point:
            horz = int((focal_point.x * 100) // self.width)
            return f"{horz}%"
        else:
            return "50%"

    @property
    def background_position_y(self):
        """
        Returns the vertical background position as a percentage string.

        This positions the rendition vertically according to the focal point's y coordinate.