PHPackages                             mfeinbier/craft3-fp-backgrounds - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. mfeinbier/craft3-fp-backgrounds

ActiveCraft-plugin[Templating & Views](/categories/templating)

mfeinbier/craft3-fp-backgrounds
===============================

Use FocalPoint for responsive background positioning in Craft CMS

1.0.0(8y ago)0346[2 issues](https://github.com/michaelfeinbier/craft3-fp-backgrounds/issues)MITPHP

Since Jun 15Pushed 7y agoCompare

[ Source](https://github.com/michaelfeinbier/craft3-fp-backgrounds)[ Packagist](https://packagist.org/packages/mfeinbier/craft3-fp-backgrounds)[ RSS](/packages/mfeinbier-craft3-fp-backgrounds/feed)WikiDiscussions master Synced today

READMEChangelog (2)Dependencies (1)Versions (2)Used By (0)

FocalPoint Background-positioning for Craft CMS
===============================================

[](#focalpoint-background-positioning-for-craft-cms)

This plugin provides some Twig functions and filters to use the FocalPoint in [Craft CMS](https://craftcms.com/) templates. It is useful for background-positioning in responsive designs when the important part of the image is not in the center.

*(It is my first Craft CMS plugin to learn some basics about plugin development in Craft. Besides that fact I just needed the Twig functions :)*

Requirements
------------

[](#requirements)

This plugin requires Craft CMS 3.0.0-beta.1 or later.

Installation
------------

[](#installation)

To install the plugin, follow these instructions.

1. Go to your Craft project in a terminal:

    ```
     cd /path/to/project

    ```
2. Install the plugin via composer:

    ```
     composer require mfeinbier/craft3-fp-backgrounds

    ```
3. In the Control Panel, go to Settings → Plugins and click the “Install” button for FocalPoint backgrounds.

Usage
-----

[](#usage)

With the `FocalPoint` you can set in Craft for pictures, it is possible to have the marked area for smaller screen sizes always in the center of the screen. This is especially useful when the **important part of the image is not in the center.**

Imagine you have a fullscreen background image in your template which is defined in CSS like this

```
.fullpage-bg {
    background: #BADA55 url("images/fallback-background") no-repeat 50% 50%;
    background-size: cover;
}
```

Setting the `background-size` to `cover` is important to automatically fill the whole div for all screen-sizes.

In your Craft Template you now want to use a linked asset to fill the background and use the new functions provided by this plugin to position your image

```
{% set image = entry.backgroundImage[0] ?? null %} // or whatever you use to get the image

```

This will output the correct CSS settings for positioning the image based on the `FocalPoint`

```

```

If you need more control over the `x` or `y` positions you can use the `|focalXPosition` and `|focalYPosition` filters:

```