I see all the time websites like stackoverflow for example embed their logo as a background image with a span tag for the text for screen-readers.
<a href="https://stackoverflow.com" class="-logo js-gps-track">
<span class="-img _glyph">Stack Overflow</span>
</a>
Why do this instead of an img element with alt text? Is there some semantic reason? Some accessibility reason? SEO reason?
It's not for styling the fallback text in-case an image doesn't load. You can style alt text...
It's not for performance - because with img's you can use srcset and sizes to provide alternate smaller images, and CSS's only spec that's close to what srcset and sizes does isn't well supported yet.
The only time that I see it making sense is when a spritesheet is being used for a site(like with stack overflow.)
If it's to prevent people from "stealing" the logo, that seems silly, because a simple google search would tell someone how to get the url of a background image. If that were the reasoning, it still seems silly because you could just use pointer-events:none; on the image itself, and set the wrapping link to display:inline-block;, and it'd still be a clickable link, without someone being able to right click and save as.
I'd just like to understand if there's an advantage to doing it.
I googled around but didn't really find any useful information answering why to do it either way.
Someone tagged this as being a duplicate to: When to use IMG vs. CSS background-image? They are not the same question. This is a specific practice and pattern you see on the web, the reasoning behind it can be different from the answer in the other post.
Why do this instead of an img element with alt text? Is there some semantic reason? Some accessibility reason? SEO reason?
It's useful when you want to use CSS media queries and display a different logo size depending on the screen resolution.
Regarding accessibility, that would be reasons like permitting users to view alternative text when images are disabled.