how to set the different background image format (png and webp) of the same image in section tag

Question

I have started using webp images in my site with <picture> tag. all set except this

<section class="sec-bg" style="background: url('images/bg.jpg');"> 

I don't know, how to set the different background image format (png and webp) of the same image. please give a solution for this inline CSS in the section tag.

for other images, I'm using below code

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture> 

Answer 1

I would suggest you to use JS to handle that issue. For example you can find all elements with background or background-image style on a page and after that just replace your webp image to jpeg version. So your script will look like:

document.deepCss= function(who, css){
  if(!who || !who.style) return '';
  var sty= css.replace(/\-([a-z])/g, function(a, b){
    return b.toUpperCase();
  });
  if(who.currentStyle){
    return who.style[sty] || who.currentStyle[sty] || '';
  }
  var dv= document.defaultView || window;
  return who.style[sty] ||
      dv.getComputedStyle(who,"").getPropertyValue(css) || '';
};
var elms = document.getElementsByTagName('*');
for (var i=0;i<elms.length;i++) {
  var url = document.deepCss(elms[i], 'background-image');
  if (url) {
    url=/url\(['"]?([^")]+)/.exec(url);

    if (url && url[1]) {
      elms[i].style.backgroundImage = "url("+url.replace('.webp', '.jpeg')+")"
    }
  }
}

It would be much easier for you to store the same image in two formats with the same name, for example test.jepg and test.webp, in this case you can just replace image extension by using the script which I provided above.

Answer 2

If you don't want to use JavaScript to serve formats specific to the client consider using the <picture> tag with both sources and using CSS and position: absolute and z-index: -1 to push the image into the background.

To expand your example, here's how it would work:

HTML

<div class="sec-bg">
  <div class="sec-bg__image">
    <picture>
      <source srcset="img/awesomeWebPImage.webp" type="image/webp">
      <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
      <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
    </picture> 
  </div>
 
  <div class="sec-bg__content">
    <p>Your section content goes here!</p>
  </div>
</div>

CSS

.sec-bg
{
  position: relative;
  z-index: 0;
}

.sec-bg__image
{
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-indez: -1;
}