@jan I have a Redbubble eshop with many illustration upload on it ( https://www.redbubble.com/people/davidrevoy/shop?artistUserName=davidrevoy&asc=u ) but I don't upload them all (to save time). If you want a specific artwork, feel free to ask and I'll upload the high resolution.

If you want to go DIY or self-printing: it's ok and I encourage it too: I upload sources here https://www.peppercarrot.com/en/files/framasoft.html and distribute them with full size (and layers) under a permissive Creative Commons license (CC-By).

Thanks 😀

@phi1997 Thanks for sharing this source! (1998, wow! )

@sabrinaweb71
per the second link, it's CC-BY, so all you need to do is provide credit wherever you use it

@lukepfjo @sabrinaweb71 Iuploaded the full size, source and license here: https://www.peppercarrot.com/en/viewer/framasoft-src__2023-02-17_I-am-a-Teapot-418-Error_by-David-Revoy.html , thanks for reusing it 🙂

@sabrinaweb71

here's my website's responsive 404 page that I updated to use the image last night. optimally it would use an imageset instead of just a 1080p image, but I was lazy.

https://lukepj.com/404

MIT license, no credit needed to use/modify/copy it from my site if you don't want to. just make sure to respect David's CC-BY and add credit whenever you use it.

@lukepfjo

Oh nice for stretching the picture fullscreen and getting it responsive.
On https://http.framasoft.org/404/ , I can't see the same effect. What could be modified to make it responsive as well? (I ask in case it's a low hanging fruit to grab).

The HTML is generated here: https://framagit.org/framasoft/fun/http-status-david-revoy/-/blob/main/build_page.sh#L194

@sabrinaweb71

@sabrinaweb71

the trick is using a background image on the body element instead of an img/picture tag. just remember that text is vital for accessibility since you won't have an alt tag.

switching between image sizes can then be handled with @media rules matching screen width ranges.

@sabrinaweb71

here's how to get it to display nicely:
background-image: url('4xx.jpg');
background-position: center;
background-size: cover;

the last two tell the browser "center the image on the element it's attached to, then automatically resize it to cover the element while preserving its aspect ratio"

@sabrinaweb71

ah, I see you're doing similar. it's late so I could only take a glance, but I'm guessing the issue is that you haven't set the dimensions of the element the background image is attached to.

height: 100vh

works in a pinch, but it gets a little funky with browser bars on mobile devices (thanks W3C, that standard was _very_ helpful 🙄). iirc if you look at the source on the page I posted there's a JS snippet I wrote to help.

@sabrinaweb71

here's the site's repo for easier browsing

https://github.com/lukepfjo/luketimothyjones.github.io

@lukepfjo Thanks for the tips and the URL, I bookmarked and I'll have a look 👍

@sabrinaweb71