Member Avatar for johmny

hello to all the members of daniweb
My Question is if we insert the image in css, so how can I add the alt attribute or other property which will work like the alt text. Because alt text attributs are important for the seo. But Alt attribute is the tag of the html not css.

  • 3 Contributors
  • 3 Replies
  • 258 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Short answer for : if the image is meaningful content (affects SEO or conveys information), put it in the HTML with a proper alt. If it is purely decorative, use a CSS background-image. Relying on a title on the container is not a dependable replacement for alt—titles are inconsistently exposed to assistive tech and offer little SEO value.

If you must use a CSS background but still need an accessible/alt-like description, give the container an image role and a label so screen readers get the description while CSS paints the visual:

<div class="hero" role="img" aria-label="Red vintage car driving along a coastal road"></div>

.hero {
  background-image: url('car.jpg');
  background-size: cover;
  height: 300px;
}

Another practical pattern (useful for icon buttons or decorative images where the visual is in CSS) is to include descriptive text for assistive tech and hide it visually with an sr-only utility:

<a class="btn-cart" style="background-image:url(cart.png);">
  <span class="sr-only">Add item to cart</span>
</a>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

For icons that carry meaning, prefer inline SVG (with a <title> or role="img" + aria-label) or a real <img> with alt. If an icon is purely decorative, mark it aria-hidden="true" so screen readers skip it (this addresses the accessibility gap and raised about icon fonts/background icons). Final checklist: meaningful image -> use <img alt="...">; decorative -> CSS background + aria-hidden or no label; always test with a screen reader and a crawler to confirm the behavior.

Recommended Answers

All 3 Replies

Member Avatar for Member #120589

Background images in css aren't really meant to be used as images (tag-wise) in HTML, but you can use css (and js possibly) to fill a container with a background image. You can add a title attribute to the container tag.

Member Avatar for JorgeM

So to add to diafol's comments, with regard to images the alt tag is not only important for SEO but also for also for users with visual disabilities. The alt tag should be used to populate text that is a description of the image. The text can then be read aloud to blind users on a screen reader.

When you use an image as a background, the image serves a different purpose. As a background image, how do you expect it to benefit your SEO? Your element that contains this background image may/should/would have appropriate text.

Member Avatar for Member #120589

I can understand the old "image replacement" trick, but as Jorge states, the original tag text content should cover that.

If you use css background sprites for standalone icons (no-text), that's a bit more tricky. Ideally they'd be images in their own right, but this is a feature that's becoming more popular with the iconification of pages. An interesting example would be the the icons on this post (Flag and Bookmark). Neither has an accompanying title attribute:

<a class="button blue flag no-margin margin-right" href="#"><i class="fa fa-flag"></i></a>

This uses an icon font, but for the sakes of SEO / accessibility it probably equates to the same thing - no SEO, not accessible.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.