-1

The following lines of code are the background images on a small website with a full screen header image. I wanted to apply the styles directly in the html with the intention, that loading of the images is not blocked by css-parsing.

I tried two different approaches:

<div class="..." style="background-image: url('assets/img/textatelier/textatelier_elisabeth_zenz_header_3733.jpg'); background-image: -webkit-image-set('assets/img/textatelier/textatelier_elisabeth_zenz_header_1867.jpg' 1x, 'assets/img/textatelier/textatelier_elisabeth_zenz_header_3733.jpg' 2x);background-image: image-set('assets/img/textatelier/textatelier_elisabeth_zenz_header_1867.jpg' 1x, 'assets/img/textatelier/textatelier_elisabeth_zenz_header_3733.jpg' 2x);" data-zanim-xs='{"delay":0,"animation":"zoom-out"}' data-zanim-trigger="scroll">

The second approach the same, except also encapsulating the image paths with url().

Both do not validate on validator.w3.org (remark: this is the link to the validation of the website, which is live for you to see). I would deeply appreciate any hints!

Markus Proske
  • 3,356
  • 3
  • 24
  • 32

1 Answers1

1

See the MDN documentation for image-set.

The only specification that describes it is CSS Images Module Level 4 which is currently a working draft.

It isn't standard yet, so it is invalid, so the validator reports it as invalid.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335