Background Image Field
----------------------

Background Image FIeld module allows you to create a field on an entity type. 
It requires responsive images mapping in order to offer the best image quality 
for the device it is rendering on. The field will define the CSS selector to 
attach the background image too and then allow you basic CSS options repeat, 
size, and position so you can define a per 
image solution for your frontend needs.

### Dependencies

-   Token
-   Core: Responsive Images

### Similar Projects

Formatters are used in the process of how fields are rendered. A formatter 
is an addition to how a field works and is not a field itself. Formatters 
can solve global issues while using the base fields configuration. Formatters 
that have similar features as the Background Image Field:

-   [Picture Background Formatter (base formatter)](https://www.drupal.org/project/picture_background_formatter)
-   [Background Images Formatter](https://www.drupal.org/project/bg_image_formatter)
-   [Simple Background Image Formatter](https://www.drupal.org/project/background_image_formatter)

The biggest differences you will notice is that the formatters will apply it 
setting globally to all content that is being rendered with that formatter. 
Using a field-specific solution allows you the control of each 
individual content of the field type per entity type i.e. node, 
paragraph_item, or custom entity. This field type makes your 
background image content more dynamic per page and 
allows more control over how your background image will render. 
Having this as a field also allows you a different way to apply it 
to content, query it in views, custom personalization per item 
created with it.

### Installation

Install as you would any other drupal module. See more information 
[here](https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-modules).

### Configuration

1.  Create responsive image style /admin/config/media/responsive-image-style
    -   The only responsive image style that will 
    be picked up by the field formatter 
    are the ones that have selected a single image style.
2.  Add the field on an entity type such as node, 
    paragraph_item or, custom entity.

### Troubleshooting

If you do not see the background image, please make sure to check 
that the CSS selector is actually apart of the HTML. 
The field will not create the selector you choose it already has 
to exist for it to work.

If you don't see any available responsive image styles in the managed 
display setting on the entity type you will most 
likely need to create one following the outline configurations above.

Supporting organizations: 

[The Tombras Group](https://www.drupal.org/the-tombras-group)

Module Development and Maintenance

[Encore Multimedia](https://www.drupal.org/encore-multimedia)

Initial development for the formatter in the Background Image Field