Question

Method 1:

Traditionally I would include an image like this:

<img src="image.png" alt="image" />

And the alt attribute would be in their for 2 reasons:

  1. Help Visitors with an image
  2. SEO purposes. So bots and crawlers know what an image is, i.e. keywords.

Method 2:

However, if I was to include the image via a css style sheet:

HTML

<div class="image"></div>

CSS

.image {
background-image: url(images/products_partitioning.png);
}

Is there anyway to include the alt attribute via as seen in 'method 1', in 'method 2' for SEO purposes.

Was it helpful?

Solution

No.

If the image is a background image, then it would not make sense for it to have alternate content (since it is, by definition, not content).

If the image is not a background image, then it should be included via an <img> element and not CSS.

(There are hacks involving having real content in an element, then setting fixed dimensions on that element along with a background image and text-indent: -9999px, but that's ugly and unsemantic (and also the reverse of what you've asked for)).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top