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.

Answer 1

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>

Answer 2

@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?