Fix Layout Builder section rendering original Background Image when no background options, no image styles, or lazy loading are applied

Problem/Motivation

The background image for the section is rendered as the original image, with no image styles, and no lazy loading, which will affect the performance and page load

Proposed resolution

• Render the image using image style.
• Change the rendering to allow it to use Blazy (To not render it as CSS)
• The CSS attr() function got nothin’ on custom properties
  

  Having a hint of a good solution with "Using attr to set css variable inline"

  In the buildBackgroundMediaImage

  The $style = 'background-image: url(' . $background_url . ');';
  could be manged with media selection for each breakpoints

  • xs
    

    	$style .= '@media (max-width: 576px) {';
    	$style .= '  background-image: attr(data-bs-xs-bg-image);';
    	$style .= '}';
    	

  • sm
    

    	$style .= '@media (min-width: 576px) {';
    	$style .= '  background-image: attr(data-bs-sm-bg-image);';
    	$style .= '}';
    	

  • md
    

    	$style .= '@media (min-width: 768px) {';
    	$style .= '  background-image: attr(data-bs-md-bg-image);';
    	$style .= '}';
    	

  • lg
    

    	$style .= '@media (min-width: 992px) {';
    	$style .= '  background-image: attr(data-bs-lg-bg-image);';
    	$style .= '}';
    	

  • xl
    

    	$style .= '@media (min-width: 1200px) {';
    	$style .= '  background-image: attr(data-bs-xl-bg-image);';
    	$style .= '}';
    	

  • xxl
    

    	$style .= '@media (min-width: 1400px) {;
    	$style .= '  background-image: attr(data-bs-xxl-bg-image);';
    	$style .= '}';
    	

  And add the "data-bs-xs-bg-image", "data-bs-sm-bg-image", "data-bs-md-bg-image", "data-bs-lg-bg-image", "data-bs-xl-bg-image", "data-bs-xxl-bg-image" data attributes to the section main element ( template, by passing the selected image style for each breakpoints).

  ---
  It is possible to add an integration with Drimage using this way too

  #3314428: Switching ratio on small screens

Remaining tasks

• ✅ File an issue
• ➖ Addition/Change/Update/Fix
• ➖ Testing to ensure no regression
• ➖ Automated unit testing coverage
• ➖ Automated functional testing coverage
• ➖ UX/UI designer responsibilities
• ➖ Readability
• ➖ Accessibility
• ➖ Performance
• ➖ Security
• ➖ Documentation
• ➖ Code review by maintainers
• ➖ Full testing and approval
• ➖ Credit contributors
• ➖ Review with the product owner
• ➖ Release notes snippet
• ❌ Release

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• N/A