Hey guys, does anyone know if there is away to add alt tags to background images? I’m optimizing a site that I designed for SEO but it doesn’t look like there’s a way to add alt tags to background images.
No. Not an option in HTML.
Here’s an answer from a similar post Alt Tags for Background Images:
Oh ok perfect, all tags will only work within the html doc and are not possible since bg images are stored in css file. Get it.
Yea, the title tag is not the same as the alt tag when it comes to SEO. In the case of an image not showing up when a page loads, the title tag will not appear as an alt tag would. Best solution is to add an image element and add the alt tag to the image.
This might be a good workaround: (starting at 40:55)
You can add an actual image in a div and set it as a background image with custom code!
In general this is the “rule”:
Replace non-decorative CSS background with standard inline images. css-background-images-and-accessibility.
In practice, a lot of times, sites use background images and not inline images (The main reason is the
"background-size: cover;" it’s harder/tricky to create the same effect for inline images).
Summary: Inline images better for
cool, thanks for resources.
AND webflow responsive image magic does not apply to Background images so you will warning from page speed tests
To that adding title to the div is the only way for you to do a background image CSS.
you can cheat a little by then loading a transparent image in the container that the background image is in,
make this image have an alt tag and title tag for whatever your background image is about.
if you are doing this for SEO purpose this should work, if you are doing it to have the HTML well formatted,
there is only the div tag.
FYI: Using the alt tag to describe a transparent image overlay for SEO could result in your site being penalized. Alt tags are for screen readers and assistive devices.
Google can figure out what an image is about without your help. It’s call AI.
No, but you can name your background image file with your keywords
As far as I know, it is only possible in HTML.
It is only possible to html