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> 

Buber

This CSS tricks article suggests using Modernizr to get either CSS class webp or no-webp added automatically to html element. Then you can style your elements like .webp <my-element-selector> { ... url for webp } and .no-webp <my-element-selector> { ... url for png/jpg }. – Rumal

Answer 1

we can use image-set attr

.box {
  background-image: -webkit-image-set(
    url("large-balloons.avif") type("image/avif"),
    url("large-balloons.jpg") type("image/jpeg"));
  background-image: image-set(
    url("large-balloons.avif") type("image/avif"),
    url("large-balloons.jpg") type("image/jpeg"));
}

refer to it https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set#using_image-set_to_provide_alternative_image_formats

Skindeep

Answer 2

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.

Hullda

Answer 3

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;
}

Arratoon

Answer 4

Have you tried the CSS rule below ?

background-image: url('img/image1.webp'), url('img/image1.jpg');

Considering that both images are the same, the second one will be used if the first one doesn't exist. This way, it acts like a "fallback image".

An inline solution can be

<section class="sec-bg" style="background-image: url('img/image1.webp'), url('img/image1.jpg');"> 

Underdrawers

Thanks for answering but now I get a 404 response. – Buber

Did you replace the paths correctly ? If not, you can try this : <section class="sec-bg" style="background-image: url('img/awesomeWebPImage.webp'), url('img/creakyOldJPEG.jpg');"> – Underdrawers

Testing on Chrome I found that it loads both images, defeating the purpose of using webp. – Wink