-2

Trying to figure out how to server webp images from a style sheet for tag elements WITHOUT a selector. For example, header.

For example:

.no-webp header {
background-image: linear-gradient(rgba(0, 0, 0, 0.73), rgba(0, 0, 0, 0) 26.05%), url('../img/my-image.jpg');

} .webp .header { background-image: linear-gradient(rgba(0, 0, 0, 0.73), rgba(0, 0, 0, 0) 26.05%), url('../img/my-image.webp'); }

The above code does not display either the jpg or webp.

ControlZ
  • 185
  • 2
  • 16
  • Have you got the url of the images right? I ask because your css works fine for me with my own image (a jpg)- that is, the top part is darkened. Could you put up a working snippet which shows the problem. – A Haworth Jul 14 '21 at 20:10
  • I figured it out - see below. – ControlZ Jul 14 '21 at 20:16

1 Answers1

-1

I corrected this by using modernizr.custom.js with support for .webp and .no-webp. The page is now serving webp images.

ControlZ
  • 185
  • 2
  • 16