Module Description
Layouts with Background Images The BG stands for backgrounds! This module provides plugins for use with Layout Builder that make it extraordinarily easy to add background images or background video to your layouts. There is single-column layout and a two-column layout. You can add a background to other layouts easily in most cases.
Use Cases
The use cases are numerous, but there are a few worth pointing out. Click the links to see well-documented examples. Keep in mind that Layout Builder can be used for more than laying out the full view mode of a node!
* Easily create a Paragraph that has a highly performant background image or a background video
* Make a cool teaser view mode with the node's hero image as a background image
* Create advanced image effects without a single line of code.
The Background Region
This module provides Layout plugins that feature a background region. It acts like any other region in the Layout Builder UI: the background region can accept any number of blocks, the blocks can be moved around by dragging, etc. The first block that is not empty will be rendered and the magic of object-fit is used to make the image or video behave like a background image. This "use the first non-empty block" technique allows for cool fallback strategies and easy management of default backgrounds.
Use Your Favorite Field Formatters
Since it's not really a background image and is instead an actual img or video tag, there's a ridiculous amount of flexibility and little difficulty! Most likely, you will be adding a field block to the background region, where the field is an image field or a media reference field. You can use any field formatter that renders the field as an img or video tag. It works with just about any of the tools you already use:
* Image and Media Thumbnails
* Image styles
* Responsive Images
* Blazy (lazy loading)
* Autoplaying videos
* Images or Videos in a WYSIWYG
* Some autoplaying slideshows
And none of it takes any more configuration than you are used to! It's all thanks to the magic of object-fit.
Just to clarify, you do not need to (nor should you) use any special field formatters that are typically used for background images. This module gives the illusion of background images while still using real img or video tags. That's why it's so easily compatible with Blazy and Responsive Images.
Recommended Modules
Layout Builder and Layout Discovery (both in core) are required. It works great with other modules like Responsive Image and Blazy.
If you want to have an autoplaying slideshow of images in the background, I would recommend the simple and effective Imagefield Slideshow module. The only extra work you have to do is remove the styles that Imagefield Slideshow puts on the imagefield_slideshow-wrapper class or override the template to remove that class.
Configuration
There is no global configuration for this module.
A Layout Section provided by this module has several configuration options. Specifically, you may configure a background color, overlay color, overlay opacity, and text color. There is also a configuration option that controls the behavior of the background image.
Note that the background image is not configuration. The background is a region that holds blocks, just like any other layout region.
See the first image above for an example of what the Layout Builder UI looks like when using a Layout BG section. See the other two images for what the rendered layout might look like on desktop and then on mobile. This very cool layout was ridiculously easy to configure! The only additional styling was to add some padding and to remove some weird padding/margin that Bartik included.
Troubleshooting
Not working? Here are some things to consider.
Does your browser support object-fit? If not, this won't work.
Is there more than a single img tag being rendered in the background? Or is text being rendered in the background? If so, that may mess things up. Avoid text in the background region. Block labels get suppressed by default for this reason.
Similar Modules
This module provides Layout Plugins that feature a background region, which holds any number of blocks, just like a typical Layout Builder region.
That is a key difference between this module and other somewhat similar modules like Layout Builder BGColor or Seeds Layouts or Layout Builder Base or Varbase Layout Builder. All of those allow some amount of configuration of a layout background, but they do not provide a background region.
This difference is what allows Layout BG to work seamlessly with any field formatter that renders and image or video tag including Responsive Images and Blazy (or other lazy-loading solutions).
Try it! You'll like it! Check out the documentation for some examples and tips.
Use Cases
The use cases are numerous, but there are a few worth pointing out. Click the links to see well-documented examples. Keep in mind that Layout Builder can be used for more than laying out the full view mode of a node!
* Easily create a Paragraph that has a highly performant background image or a background video
* Make a cool teaser view mode with the node's hero image as a background image
* Create advanced image effects without a single line of code.
The Background Region
This module provides Layout plugins that feature a background region. It acts like any other region in the Layout Builder UI: the background region can accept any number of blocks, the blocks can be moved around by dragging, etc. The first block that is not empty will be rendered and the magic of object-fit is used to make the image or video behave like a background image. This "use the first non-empty block" technique allows for cool fallback strategies and easy management of default backgrounds.
Use Your Favorite Field Formatters
Since it's not really a background image and is instead an actual img or video tag, there's a ridiculous amount of flexibility and little difficulty! Most likely, you will be adding a field block to the background region, where the field is an image field or a media reference field. You can use any field formatter that renders the field as an img or video tag. It works with just about any of the tools you already use:
* Image and Media Thumbnails
* Image styles
* Responsive Images
* Blazy (lazy loading)
* Autoplaying videos
* Images or Videos in a WYSIWYG
* Some autoplaying slideshows
And none of it takes any more configuration than you are used to! It's all thanks to the magic of object-fit.
Just to clarify, you do not need to (nor should you) use any special field formatters that are typically used for background images. This module gives the illusion of background images while still using real img or video tags. That's why it's so easily compatible with Blazy and Responsive Images.
Recommended Modules
Layout Builder and Layout Discovery (both in core) are required. It works great with other modules like Responsive Image and Blazy.
If you want to have an autoplaying slideshow of images in the background, I would recommend the simple and effective Imagefield Slideshow module. The only extra work you have to do is remove the styles that Imagefield Slideshow puts on the imagefield_slideshow-wrapper class or override the template to remove that class.
Configuration
There is no global configuration for this module.
A Layout Section provided by this module has several configuration options. Specifically, you may configure a background color, overlay color, overlay opacity, and text color. There is also a configuration option that controls the behavior of the background image.
Note that the background image is not configuration. The background is a region that holds blocks, just like any other layout region.
See the first image above for an example of what the Layout Builder UI looks like when using a Layout BG section. See the other two images for what the rendered layout might look like on desktop and then on mobile. This very cool layout was ridiculously easy to configure! The only additional styling was to add some padding and to remove some weird padding/margin that Bartik included.
Troubleshooting
Not working? Here are some things to consider.
Does your browser support object-fit? If not, this won't work.
Is there more than a single img tag being rendered in the background? Or is text being rendered in the background? If so, that may mess things up. Avoid text in the background region. Block labels get suppressed by default for this reason.
Similar Modules
This module provides Layout Plugins that feature a background region, which holds any number of blocks, just like a typical Layout Builder region.
That is a key difference between this module and other somewhat similar modules like Layout Builder BGColor or Seeds Layouts or Layout Builder Base or Varbase Layout Builder. All of those allow some amount of configuration of a layout background, but they do not provide a background region.
This difference is what allows Layout BG to work seamlessly with any field formatter that renders and image or video tag including Responsive Images and Blazy (or other lazy-loading solutions).
Try it! You'll like it! Check out the documentation for some examples and tips.
Module Link
Project Usage
815
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to solve the issue of easily adding background images or background videos to layouts using Layout Builder, without the need for special field formatters typically used for background images.
Data Name
layout_bg
OPENAI CHATBOT
OPENAI CHATBOT
