Skip to content

Commit

Permalink
Self-hosting some of the background images
Browse files Browse the repository at this point in the history
  • Loading branch information
@verlok
verlok committed Apr 2, 2024
1 parent bdb6c7b commit 74cf66b
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 92 deletions.
80 changes: 40 additions & 40 deletions demos/background_images_image-set.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@ <h1>Background images with <q>image-set</q> demo</h1>
href="#"
style="
background-image: -webkit-image-set(
url('https://via.placeholder.com/220x280?text=Img+01') 1x,
url('https://via.placeholder.com/440x560?text=Img+01') 2x
url('./images/220x280-01.jpg') 1x,
url('./images/440x560-01.jpg') 2x
);
background-image: image-set(
url('https://via.placeholder.com/220x280?text=Img+01') 1x,
url('https://via.placeholder.com/440x560?text=Img+01') 2x
url('./images/220x280-01.jpg') 1x,
url('./images/440x560-01.jpg') 2x
);
"
></a>
Expand Down Expand Up @@ -73,7 +73,7 @@ <h1>Background images with <q>image-set</q> demo</h1>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+03') 1x, url('https://via.placeholder.com/440x560?text=Img+03') 2x"
data-bg-set="url('./images/220x280-03.jpg') 1x, url('./images/440x560-03.jpg') 2x"
></a>
</li>
<li>
Expand All @@ -90,245 +90,245 @@ <h1>Background images with <q>image-set</q> demo</h1>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+05') 1x, url('https://via.placeholder.com/440x560?text=Img+05') 2x"
data-bg-set="url('./images/220x280-05.jpg') 1x, url('./images/440x560-05.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+06') 1x, url('https://via.placeholder.com/440x560?text=Img+06') 2x"
data-bg-set="url('./images/220x280-06.jpg') 1x, url('./images/440x560-06.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+07') 1x, url('https://via.placeholder.com/440x560?text=Img+07') 2x"
data-bg-set="url('./images/220x280-07.jpg') 1x, url('./images/440x560-07.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+08') 1x, url('https://via.placeholder.com/440x560?text=Img+08') 2x"
data-bg-set="url('./images/220x280-08.jpg') 1x, url('./images/440x560-08.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+09') 1x, url('https://via.placeholder.com/440x560?text=Img+09') 2x"
data-bg-set="url('./images/220x280-09.jpg') 1x, url('./images/440x560-09.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+10') 1x, url('https://via.placeholder.com/440x560?text=Img+10') 2x"
data-bg-set="url('./images/220x280-10.jpg') 1x, url('./images/440x560-10.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+11') 1x, url('https://via.placeholder.com/440x560?text=Img+11') 2x"
data-bg-set="url('./images/220x280-11.jpg') 1x, url('./images/440x560-11.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+12') 1x, url('https://via.placeholder.com/440x560?text=Img+12') 2x"
data-bg-set="url('./images/220x280-12.jpg') 1x, url('./images/440x560-12.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+13') 1x, url('https://via.placeholder.com/440x560?text=Img+13') 2x"
data-bg-set="url('./images/220x280-13.jpg') 1x, url('./images/440x560-13.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+14') 1x, url('https://via.placeholder.com/440x560?text=Img+14') 2x"
data-bg-set="url('./images/220x280-14.jpg') 1x, url('./images/440x560-14.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+15') 1x, url('https://via.placeholder.com/440x560?text=Img+15') 2x"
data-bg-set="url('./images/220x280-15.jpg') 1x, url('./images/440x560-15.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+16') 1x, url('https://via.placeholder.com/440x560?text=Img+16') 2x"
data-bg-set="url('./images/220x280-16.jpg') 1x, url('./images/440x560-16.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+17') 1x, url('https://via.placeholder.com/440x560?text=Img+17') 2x"
data-bg-set="url('./images/220x280-17.jpg') 1x, url('./images/440x560-17.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+18') 1x, url('https://via.placeholder.com/440x560?text=Img+18') 2x"
data-bg-set="url('./images/220x280-18.jpg') 1x, url('./images/440x560-18.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+19') 1x, url('https://via.placeholder.com/440x560?text=Img+19') 2x"
data-bg-set="url('./images/220x280-19.jpg') 1x, url('./images/440x560-19.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+20') 1x, url('https://via.placeholder.com/440x560?text=Img+20') 2x"
data-bg-set="url('./images/220x280-20.jpg') 1x, url('./images/440x560-20.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+21') 1x, url('https://via.placeholder.com/440x560?text=Img+21') 2x"
data-bg-set="url('./images/220x280-21.jpg') 1x, url('./images/440x560-21.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+22') 1x, url('https://via.placeholder.com/440x560?text=Img+22') 2x"
data-bg-set="url('./images/220x280-22.jpg') 1x, url('./images/440x560-22.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+23') 1x, url('https://via.placeholder.com/440x560?text=Img+23') 2x"
data-bg-set="url('./images/220x280-23.jpg') 1x, url('./images/440x560-23.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+24') 1x, url('https://via.placeholder.com/440x560?text=Img+24') 2x"
data-bg-set="url('./images/220x280-24.jpg') 1x, url('./images/440x560-24.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+25') 1x, url('https://via.placeholder.com/440x560?text=Img+25') 2x"
data-bg-set="url('./images/220x280-25.jpg') 1x, url('./images/440x560-25.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+26') 1x, url('https://via.placeholder.com/440x560?text=Img+26') 2x"
data-bg-set="url('./images/220x280-26.jpg') 1x, url('./images/440x560-26.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+27') 1x, url('https://via.placeholder.com/440x560?text=Img+27') 2x"
data-bg-set="url('./images/220x280-27.jpg') 1x, url('./images/440x560-27.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+28') 1x, url('https://via.placeholder.com/440x560?text=Img+28') 2x"
data-bg-set="url('./images/220x280-28.jpg') 1x, url('./images/440x560-28.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+29') 1x, url('https://via.placeholder.com/440x560?text=Img+29') 2x"
data-bg-set="url('./images/220x280-29.jpg') 1x, url('./images/440x560-29.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+30') 1x, url('https://via.placeholder.com/440x560?text=Img+30') 2x"
data-bg-set="url('./images/220x280-30.jpg') 1x, url('./images/440x560-30.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+31') 1x, url('https://via.placeholder.com/440x560?text=Img+31') 2x"
data-bg-set="url('./images/220x280-31.jpg') 1x, url('./images/440x560-31.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+32') 1x, url('https://via.placeholder.com/440x560?text=Img+32') 2x"
data-bg-set="url('./images/220x280-32.jpg') 1x, url('./images/440x560-32.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+33') 1x, url('https://via.placeholder.com/440x560?text=Img+33') 2x"
data-bg-set="url('./images/220x280-33.jpg') 1x, url('./images/440x560-33.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+34') 1x, url('https://via.placeholder.com/440x560?text=Img+34') 2x"
data-bg-set="url('./images/220x280-34.jpg') 1x, url('./images/440x560-34.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+35') 1x, url('https://via.placeholder.com/440x560?text=Img+35') 2x"
data-bg-set="url('./images/220x280-35.jpg') 1x, url('./images/440x560-35.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+36') 1x, url('https://via.placeholder.com/440x560?text=Img+36') 2x"
data-bg-set="url('./images/220x280-36.jpg') 1x, url('./images/440x560-36.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+37') 1x, url('https://via.placeholder.com/440x560?text=Img+37') 2x"
data-bg-set="url('./images/220x280-37.jpg') 1x, url('./images/440x560-37.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+38') 1x, url('https://via.placeholder.com/440x560?text=Img+38') 2x"
data-bg-set="url('./images/220x280-38.jpg') 1x, url('./images/440x560-38.jpg') 2x"
></a>
</li>
<li>
<a
class="lazy"
href="#"
data-bg-set="url('https://via.placeholder.com/220x280?text=Img+39') 1x, url('https://via.placeholder.com/440x560?text=Img+39') 2x"
data-bg-set="url('./images/220x280-39.jpg') 1x, url('./images/440x560-39.jpg') 2x"
></a>
</li>
</ul>
Expand Down
Loading

0 comments on commit 74cf66b

Please sign in to comment.