How to prevent showing image alt text if image is loaded using css

Question

I am loading an image through css background property , instead of using src attribute. But in that case the alt text is also showing up. How can I stop showing alt text & show it only if image is not loaded

.test {
  display: block;
  width: 200px;
  height: 82px;
  background-size: 200px 82px;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJr81CRJeZGFiBsA9_AOyyxegiIPctdcbNfHThnpnclmFH-mJwoQ");
}

<img class="test" alt="My background image">

Try to use div tags other than img tag to avoid showing alt text. Better to use img tag incase of image failure... — Nandakumar
– Nandakumar, Commented Sep 6, 2017 at 5:43
Check the answer here stackoverflow.com/questions/4216035/… — Ovidiu Unguru
– Ovidiu Unguru, Commented Sep 6, 2017 at 5:46
@brk, If an image is loaded or not, you can check it with image naturalHeight and naturalWeight. but if your url is invalid then it also returned a image with 1px dot (1x1) [for only your image hosting url]. So you should check if the image naturalHeight is greater than 1 for image loaded properly.Then you can removed alt attribute value. See the jsfiddle. jsfiddle.net/ataur63/4w5aywzc — Ataur Rahman Munna
– Ataur Rahman Munna, Commented Sep 6, 2017 at 6:54
naturalWeight should be naturalWidth. My mistake in typo. :) — Ataur Rahman Munna
– Ataur Rahman Munna, Commented Sep 6, 2017 at 7:02

Mosh Feu · Accepted Answer · 2017-09-06 07:27:10Z

2

You can do a little trick and hide the "text" inside the image if the image has no src attribute (or its empty).

(You can hide the text in many ways I choose one)

.test {
  display: block;
  width: 200px;
  height: 82px;
  background-size: 200px 82px;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJr81CRJeZGFiBsA9_AOyyxegiIPctdcbNfHThnpnclmFH-mJwoQ");
}

img:not([src]) {
  font-size: 0;
  position: relative;
}

img:not([src]):after {
  font-size: 18px;
  border: 1px solid black;
  box-sizing: border-box;
  content: attr(alt);
  z-index: -1;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0
}

<img class="test" alt="My background image">

_{The completion for the css (the :after part) received from @Ihazkode.}

For displaying the alt after the image loading you can load (with javascript) the image first, then, put it in the image and display the alt. (Based on this answer)

$('[data-image]').each(function() {
  var $this = $(this);
  var alt = $this.attr('alt');
  var src = $(this).attr('data-image');
  $this.removeAttr('alt');
  
  $('<img/>').attr('src', src).on('load', function() {
    $(this).remove();
    // simulate the delay for heavy image
    setTimeout(function(){
      $this.css('background', 'url(' + src + ')').attr('alt', alt);
    }, 1000);
  }).on('error', function() {
    $this.attr('alt', alt);
  });
});

.test {
  display: block;
  width: 200px;
  height: 82px;
  background-size: 200px 82px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="test" alt="My background image" data-image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJr81CRJeZGFiBsA9_AOyyxegiIPctdcbNfHThnpnclmFH-mJwoQ">

edited Sep 6, 2017 at 7:27

answered Sep 6, 2017 at 5:42

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

brk Over a year ago

@Mosh Feu in this case the alt text wont be shown if image is not loaded. Here is a jsfiddle.net/cg6rh4Lu/1

Mosh Feu Over a year ago

@Ihazkode Thanks but I think he wants to show the alt after the image "physically" loaded to the page.

Mosh Feu Over a year ago

@Ihazkode Thank for the correction. I added a on error handler which take care about it. I understand now your solution and that's nice! (and working)

Mosh Feu Over a year ago

@brk any thoughts?

Prakash S · Accepted Answer · 2017-09-06 05:58:53Z

0

First of all I need to know, is there any purpose of setting background image to <img> tag? If yes, there is no point to use <img> tag here user <div> or any other tags instead of using <img>. As per the W3C standard tag should contain alt="some text", if <img> source not found.

answered Sep 6, 2017 at 5:58

Prakash S

1321 gold badge1 silver badge12 bronze badges

6 Comments

Prakash S Over a year ago

I don't know why down voted. My comment as per the W3C standard. If you don't know about that go and read how to use HTML tags and then do code. Before that using nonstandard coding is useless and reducing your code standard.

I haz kode Over a year ago

I was the one who down-voted. I down-voted your comment because it's a comment and not an answer. Regardless of the validity of the content of your comment, it is not an answer. Please see How to Answer

Prakash S Over a year ago

Its not necessary to answer for this question lol. I don't like to encourage this type of unnecessary things. We are not here to just answer the question. My point was he has to understand that what he doing is wrong and he has to understand, how to use html tags and purpose of attributes. First you should understand what I said before down vote.

Prakash S Over a year ago

So people like you to wait for the opportunity to down vote right. I think you are getting more reputation for down voting, enjoy your down voting. Thanks.

t.niese Over a year ago

@PrakashS you loose rep points when you down vote. The answer section is for usefull information to solve the problem. An alternative solution to the question is fine. But your "answer" is missinge the information how to add an alt text to a background image in a standard conform way if e.g. a div is used and how to only show it if that background image is not loaded. So if the OP would follow your advice then the problem would still be the same. If everyone would write their comments in the answer section then you have a hard time find alternative solutions in all that comments.

|

Collectives™ on Stack Overflow

How to prevent showing image alt text if image is loaded using css

2 Answers 2

4 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related