11

How to give alt and title for background image? Is it possible?

<div id="cont"></div>

  #cont
  {
     background:#FFF url(../images/post.png) no-repeat;
  }
Rodik
  • 4,054
  • 26
  • 49
Prashobh
  • 9,216
  • 15
  • 61
  • 91
  • A particular use case for this is when you want to use the background-image size "cover" to deal with responsive layouts without squishing the aspect ratio. I'm weighing up between a title tag on the div, and trying to achieve the same layout with an IMG tag. – Mark Jul 21 '14 at 05:10
  • Does this answer your question? [Is there a neat way to get attribution for a background image in the presentation layer?](https://stackoverflow.com/questions/6476866/is-there-a-neat-way-to-get-attribution-for-a-background-image-in-the-presentatio) – Mike Pierce Jul 22 '22 at 22:17

5 Answers5

14

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.

Rodik
  • 4,054
  • 26
  • 49
  • 2
    There probably is a way using pseudo elements and whatnot (not sure about this), but that is not recommended as it's not fully supported and isn't very accessible. – Rodik Aug 02 '12 at 09:55
9

No, because a background image is only a decorative element which should not have any semantic meaning. HTML is for semantics and meaning, CSS is just for visual appearances. If the image is so important that it should have a fallback alt text, make it an HTML <img> element.

deceze
  • 510,633
  • 85
  • 743
  • 889
1

it's simple to give a title tag to the div itself.

about the alt, if you desperately need it, the main road to go would be to put an img in the div with height="100%" and width="100%", or, if this gets in your way, add an 1px img in the div, with the alt, but it won't be seen. zindex may also help if the img is getting in your way and oclude other elements.

good luck, alex

alex
  • 651
  • 1
  • 9
  • 11
0

Yes, sometimes background images have meaning, and semantics can be applied to them.

Example scenario: If the content above the fold has 3 or 4 images, then combining those into a single sprite is optimal.

Having images as a sprite forces them to behave like a background image, but they still look like standard images on the front end, so they should have semantics applied to them.

Here's how to do it:

<div class="img_shell">
  <div class="background-img" role="img" aria-label="Alt text here"></div>
</div>

Basically the role="img" should only be applied on an empty div tag.

Ref: If your background image is being applied to the main div wrapper then there is another workaround in this article: https://www.davidmacd.com/blog/alternate-text-for-css-background-images.html

Richard
  • 11
  • 2
-2

Yes this is possible within PHP like this..

if($moon==0)
  {$icon_moon="background: url(mp0.png); background-repeat: no-repeat; 
   background-size: 15px 15px; background-position: right top";
   $title_mph = "Moon phase new";}

In this case the variable ($icon_moon) is inserted in a table for positioning like this

Adding an Alt text is also possible this way.

Chris
  • 1
  • 1