Background Images and ALT text

[MichaelGregory]

We pretty much exclusively use background images for our sites. How do I add in alt text? I tried a Google search for this issue and the best answer I could find was "Use the 'title' tag in the containing div", but that was from 2010.

Is there a better way to do it? And no, we're not going to switch to using standard images, because background images are way more slick for UX.

[erickcalderon]

I think that adding title to the div is the only way for you to do a background image in CSS.

You can cheat a little by then loading a transparent image in the container that the background image is in, make this transparent image have an alt tag and title tag for whatever your background image is about.

If you are doing this for seo purposes this should work, if you are doing it to have the html well formatted, there is only the div tag.

Cheers!
-Erick

[MichaelGregory]

I'm going with "Google is too smart for that" on the transparent image alt text front. I guess it would help out people using a screen reader, but I'd like to get some of the images into Google image search. It seems like alt text is pretty much required to rank for that?

[erickcalderon]

Yes for screen readers and using it as alt and title for your images that are there. So you are not trying to trick Google, you are trying to figure out a way to mark what is actually there. For google image search, I have had success ranking images even if used as backgrounds in divs by naming them with what I was trying to rank them for. Since I could not use alt or title I named images with my target in them. These images were all for a brand query.

Example: image on mybrand.com named mybrand-imageName.png

we were able to get most of those images to show up when doing an image search for mybrand

[Mobilio]

You can't use ALT text to background images.

If your images are loaded as img tag then you have title, alt. Example:

But background images isn't regular images loaded with img tag. They can be loaded only with CSS styling. And therefore they doesn't comes with title and alt. Example:

As you can see you can't use title or alt for image there. Only way is to define title as this:

or better this one:

I know that isn't 100% background but also helps.

Alternative way can be ARIA. If you love background images but really wish alt text you can use WAI-ARIA and define them as:

...
But GoogleBot doesn't support aria-label for now.

[nans]

Does it has any positive effect on ranking? (seo)