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 <img> 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 <div>)

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'); } ?>);">

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

  • You can't do it via the style attribute. You'll need to give the element a unique ID and then add a <style> element with the relevant rules. – Jacob Peattie Oct 21 '18 at 12:32
  • @JacobPeattie I've seen some very helpful tutorials on using Modernizr for browser detection: css-tricks.com/using-webp-images ...but this technique requires the images to be delivered via the stylesheet, as you suggest. But as I am using ACF on a single template for custom post type pages, delivering the images via the stylesheet won't work for me. The images need to be different on every page (using that single template). – Superfein Oct 22 '18 at 14:17
  • I didn't say use a stylesheet, I said use the <style> tag: w3schools.com/tags/tag_style.asp – Jacob Peattie Oct 22 '18 at 14:20
  • Can PHP be inside those style tags? I've personally never seen that done. PHP for ACF output. – Superfein Oct 22 '18 at 14:25
  • I just Googled it and yes PHP can be inside style tags. I'll experiment with this idea, thanks @JacobPeattie. – Superfein Oct 22 '18 at 14:28

Here's couple of wild ideas which you could try, if you're feeling adventurous.

1) Write some conditional logic with $_SERVER to detect if the user's browser is the right type and high enough version, that would probably support the WebP format.

Try using $_SERVER ['HTTP_USER_AGENT'] and see also https://stackoverflow.com/questions/13252603/how-does-http-user-agent-work

2) Add the WebP and fallback image urls as data attributes and use js for the browser detection and to set the WebP or the fallback image as the background-image.

e.g. <div data-webp-bg="some-img-url" data-fallback-bg="another-img-url"></div>

p.s. I don't know how well these would work, but I'm just feeling creative at the moment.

EDIT 22.10.2018 Here's couple of leads you could follow and research more, if you want to come up with working solutions to my wild ideas.

For php take a look at https://github.com/hisorange/browser-detect (originally for Laravel I guess, but I think you could use elsewhere too) or https://github.com/cbschuld/Browser.php for example.

For js, this old thread could prove useful https://stackoverflow.com/questions/5916900/how-can-you-detect-the-version-of-a-browser. See also https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator

Couple of minutes of googling gave me these related articles, https://artisansweb.net/detect-browser-php-javascript/ and https://medium.com/creative-technology-concepts-code/detect-device-browser-and-version-using-javascript-8b511906745

p.s Sorry for all the links and no code. The links are here just to provide nudge to the right direction and to promote own research and learning. This is a learning experience for me too.

  • I have no idea how I would go about that. If you could share some ideas in code, even if they are just examples, that would be very helpful. – Superfein Oct 22 '18 at 14:23
  • I added couple of links to my answer. Please see if they're any help. – Antti Koskinen Oct 22 '18 at 20:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.