Post #2030452

2026-04-20 12:09 UTC

TIL! Who knew you could change the &quot;src&quot; of an #HTML &lt;img&gt; using #CSS: img { content: url(whatever.png) } NO PSEUDOS! https://codepen.io/jon/pen/MYjRQje Seems to work in all current browsers too. How did I miss this?

Replies (4)

@scrwd@mastodon.social 2026-04-20 12:57

Not just any HTML tag it seems - "anonymous replaced elements" - still can't believe this totally slipped by me… https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content #HTML #CSS

Open ##2037586
@boolat@mastodon.social 2026-04-20 12:46

@scrwd Looks like it works even with divs. Also the behaviour is not the same as html attribute

Open ##2037587
@jonhicks@mastodon.social 2026-04-20 12:56

@scrwd this is relevant to my interests and very timely! I always used to do the background image combined with padding and overflow:hidden to do this.

Open ##2037589
@noleli@mastodon.social 2026-04-20 13:04

@scrwd yeah! I got as far as noting that in the comment in the screenshotted code but wasn’t sure whether there were other implications (performance? accessibility?) so didn’t want to make too big a deal of it https://mastodon.social/@noleli/115469551764220563

Open ##2037590