Background Images Formatter
This module provides a formatter to set an entity's image field as the background of an HTML element. It also includes a submodule for responsive background images, making it easy to manage and display images in various contexts.
This module provides an image formatter that allows you to set an image in background of a tag.
The images are from a field of an entity and not from a configuration page or a custom entity or something else, so it's very easy to setup and manage.
It contains a submodule to handle responsive images as well.
Use cases
- You want to display a image on the back of a div when viewing a particular node.
- You want to display a random image on the back of a div on the frontpage only. This can be done using Views. Create a block, select the "Background Image" formatter for your image field, save, place the block, boom, you're done.
Dependencies
- bg_image (required only in 1.x versions): It's using the API of this module to do it's magic.
- Token
- Entity for the Entity Token submodule. (optional)
- Views (optional): When using in Views, it can create very nice landing pages using random images.
Why use Views with it ?
You can use use the module Views to create a block, just like the second screenshot.
You have to select the image field, then, choose the "Background image" formatter.
The output of this block is null, so, it won't be displayed but the block will be executed and will set the background image correctly.
This is great if you need to set a random wallpaper on your site, add a sort criteria, choose "Global: random" and you're done.
Every time the page load, it will execute the View, choose a random node, extract the image field and set it as background.
You can have a more fine grained control of the "Global: Random" criteria by using Views Random Seed.
Help
You should check the screenshots, it's quite self-explanitory or use the issue queue !