CSS Background Image Alt Attribute

How to add alt text to background images? Making background images accessible

The most semantic way to make a background image accessible is to use both a background image and a regular img tag as well.

Place the img within the element with the background image.
Visually hide the img so that sighted users just see the background image behind it, but users with assistive technologies are still presented the img.

Note: just setting the image to display: none; will hide also it from assistive technologies, which isn't the goal. A different approach is needed.

If you're using Bootstrap, it has a handy built-in class for doing just this: .sr-only. If you're not, you can add the styles for that class to your own stylesheet:

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

Applying this technique to the example above looks like this:

article {  position: relative;  width: 320px;  margin: 5rem auto;}
figure {  width: 100%;  height: 180px;  /* not accessible */  background-image: url('http://www.fillmurray.com/300/300');  background-size: cover;  background-position: center;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<article class="panel panel-default">  <header class="panel-heading">    <h4 class="panel-title">Title of Article</h4>  </header>  <div class="panel-body">    <figure class="article-image">      <!-- include the img tag but visually hide it with .sr-only -->      <img class="sr-only" alt="Bill Murray" src="http://www.fillmurray.com/300/300">    </figure>  </div>  <footer class="panel-footer">    <a class="btn btn-default" href="#">Read</a>  </footer></article>

How to give alt and title for background image?

You cannot give an alt and title for a css background, but you can give a title to the div.

<div id="cont" title="Title!"></div>

The title will popup upon mouse-idle over the div element.

image alt attribute via css style sheet

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)).

CSS background-image : url( ... ) properties have also ALT?

No, you can't add alt to background images
Yes, it's possible - http://jsfiddle.net/TyFM7/

Can I style an image's ALT text with CSS?

Setting the img tag color works

img {color:#fff}

http://jsfiddle.net/YEkAt/

body {background:#000022}img {color:#fff}

<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />