Contrib.social

Background Image is not a responsive image

Open on Drupal.org →
Created on 6 December 2024, 5 months ago

Problem/Motivation

If you choose to have an image background, the image is loaded as background-image style attribute in the DOM.
You cannot use responsive images this way to prevent large images to be loaded.

Steps to reproduce

Create a section in your layout builder page and give it a background image.
Look for the bg-image class in your DOM to see the background-image in the style attribute.

Proposed resolution

Use responsive image to load the background image.

I made a patch for this, which is attachted.
Make sure the image styles and responsive image in the config/install folder are available in your website. You might need to change the responsive image yml to match your theme.
This patch:

  • adds a template for the image.
  • changes the build function for the background image.
  • adds css and js to make sure the image looks like a background image.
  • hides the background repeat and background attachment options in the layout builder section configuration.
  • uses css object-fit and object-position to show the background image.
  • is based on the functionality of the background video.
✨ Feature request
Status

Active

Version

1.2

Component

Code

Created by

🇳🇱Netherlands laarrrx

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024