Background Image is not a responsive image

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.