Thank you for your message and for your forward-thinking approach regarding the use of AVIF images.

You're absolutely correct that AVIF offers superior compression and modern features such as HDR support. To ensure broad browser compatibility, your approach of using CSS fallbacks is both effective and recommended. Implementing a layered background-image declaration or utilizing the image-set() function is a progressive enhancement strategy that works well across modern browsers while still providing support for older ones.

In SP Page Builder, the most reliable way to apply a fallback structure like this is by using a custom CSS class. Here’s how you can do that:

1. Assign a CSS Class: In the Row, Column, or Addon settings, navigate to the Advanced tab and add your custom class (e.g., avif-bg) to the CSS Class field.
2. Avoid Inline Background Settings:To ensure your custom CSS is applied properly, avoid assigning background images directly via the addon’s Style tab, as this may generate inline styles that override your external CSS.
3. Use Custom CSS: Please add the following CSS code to your Template Options -> Custom Code -> Custom CSS

.avif-bg {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  background-image: url('/images/fallback.jpg') !important; /* Fallback for older browsers */
  background-image: image-set(
    url('/images/background.avif') type('image/avif'),
    url('/images/fallback.jpg') type('image/jpeg')
  ) !important;
}

This method is currently the most robust and clean way to manage AVIF with fallbacks in SP Page Builder.

Best regards

Hi,

Just checking in—were you able to apply the CSS successfully, and is the AVIF background image with fallback working as expected?

Let me know if you ran into any issues or need further assistance.

Best regards

Hi yes this working perfectly

I Am try ing the CSS in the Section Custom CSS Box on the page as i thought this would be more practicle than trying to create a custom entry for each page in the template Custom CSS it is working well at the moment will see if it creates a conflict as i add more pages Thank you for your help.

Hi,

That’s great to hear—I'm glad it's working perfectly for you!

Using the Section Custom CSS Box is absolutely fine for page-specific styling, especially if you prefer keeping things modular. Just keep an eye out for any potential conflicts as your pages grow, particularly if multiple sections reuse the same class.

If you ever decide to centralize the styles later (for consistency across multiple pages), moving the CSS to the template’s Custom CSS would be a good option—but it’s not required if your current setup works well.

Feel free to reach out anytime if you need further assistance.

Please marked the issue as solved

Best regards

Solved