workaround for getting alt for a css image

Question

I came to know that we cannot have an alt for a css generated image.There are solutions that say by having title atribute we can get the alt effect only on hovering on the image,however when we disable the css we will not able to see that text in place of the image.In my case I need the text to be appeared even when the css is disabled .Is there any workaround for getting the text visible when the css is disabled.

    <span class="myimageclass">
    hi
    </span>
    <style>
    .myimageclass
    {
    height: 100px;
    width: 200px;

    background-image:url('http://cdn.osxdaily.com/wp- 
    content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png');
    color:red;
    overflow: hidden;
    text-indent: -9999px;



    }
    </style>

Thanks, Balaji.

yes alt is only for img tag and you cannot provide that for a CSS generated image. However, you can use javascript to detect the absence of CSS and then enter a text if CSS is disabled. — bbh, Jun 04 '15 at 06:21
thanks for your reply, so going with javascript is the only alternative. — user2345, Jun 04 '15 at 06:26
I am afraid so, because this is CSS generated image, that might be best option now. Once CSS is enabled, you will need another mechanism to display the alt text and javascript can play that role. — bbh, Jun 04 '15 at 06:27

Philip Dernovoy · Accepted Answer · 2015-06-04T08:17:18.920

2

You can use text-indent and overflow: hidden.

This is not flexible method but I hope you can use it.

.image {
  width: 200px;
  height: 100px;
  display: block; /* it needs for inline elements like span */
  background: url(http://cdn.osxdaily.com/wp-content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png);
  overflow: hidden;
  text-indent: -9999px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="image js-image">
  Image alt
</div>

<button class="js-button">On/Off styles</button>

<script>
  $('.js-button').click(function() {
    $('.js-image').toggleClass('image');
  });
</script>

edited Jun 04 '15 at 08:17

answered Jun 04 '15 at 06:29

Philip Dernovoy

1,169
6
17

Thanks for the reply Philip, so you say along with the text-indent property, we need jquery to support that as well. – user2345 Jun 04 '15 at 06:39
@balaji I added jQuery just for demo button – Philip Dernovoy Jun 04 '15 at 06:41
Hi, I tried with text-indent and overflow:hidden, if I use them, Im not able to see either the image or the text, it seems Im doing something wrong, checking on that – user2345 Jun 04 '15 at 07:13
@balaji you need to specify span sizes in styles – Philip Dernovoy Jun 04 '15 at 07:39
i have edited my code in question, somehow not able to see the image or the text with the above mentioned css – user2345 Jun 04 '15 at 08:02
@balaji it because `span` is inline elements and sizes not affect on it. Use `display: block;` or `display: inline-block;` – Philip Dernovoy Jun 04 '15 at 08:07
thanks Philip , it worked , could you please edit the answer that guided with thanks again:) – user2345 Jun 04 '15 at 08:12
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79625/discussion-between-philip-dernovoy-and-balaji). – Philip Dernovoy Jun 04 '15 at 08:14

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

@balaji, this is already an SO thread that takes care of CSS in a page, you can pick something from here and fine tune for your needs: How to determine if CSS has been loaded?

edited May 23 '17 at 12:05

Community

1
1

answered Jun 04 '15 at 06:32

bbh

489
3
13

Hi, I have followed what Philip suggested, and it worked , thanks for your help :) – user2345 Jun 04 '15 at 08:19

workaround for getting alt for a css image

2 Answers2