WebP Fallback for Inline Background Image in Style Attribute

I have developed a theme which has a custom post type called projects. On single project pages there is a parallax style section with a high quality scrolling background image. I am using a custom field ( via ACF plugin) to add this background-image to the project pages, and this custom field is coded into the single project template file. This means I only need one template for all my project pages.

This background image is high quality and so is quite a large image file (it’s important to me to retain the quality of the image). I want to add WebP images as the background images to this parallax section. But of course I need to have fallback for browsers that do not support the WebP image format. I have seen lots of articles/tutorials on how to provide fallback for images that are output via the tag, or via the background-image property in the CSS file. But I have not come across a single article referencing how to provide fallback for a background-image output via the style attribute.

I cannot output the background-images via a CSS file or CSS class, because ACF needs to be used in PHP files only, so the custom field needs to be coded directly in the template file (in the style attribute on the necessary )

In summary, how do I provide fallback for the WebP image format for images output via the style attribute? How to provide fallback for inline background-image CSS?

Code example:

<section class=”parallaxSection parallaxWide”>
<div class=”parallaxWide–wrap”>
<div class=”parallaxWide–elementWrap”>
<div class=”parallaxWide–element” style=”background-image:url(<?php if( get_field(‘parallax_bgimage’ )) { the_field(‘parallax_bgimage’); } ?>);”>
</div>
</div>
</div>
</section>

Or, is there another solution to outputting these background images that I’m missing?

Read more here:: WebP Fallback for Inline Background Image in Style Attribute

Leave a Reply

Your email address will not be published. Required fields are marked *