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, Sep 06 '17 at 05:43
Check the answer here https://stackoverflow.com/questions/4216035/css-background-image-alt-attribute — Ovidiu Unguru, Sep 06 '17 at 05: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. https://jsfiddle.net/ataur63/4w5aywzc/ — Ataur Rahman Munna, Sep 06 '17 at 06:54
`naturalWeight` should be `naturalWidth`. My mistake in typo. :) — Ataur Rahman Munna, Sep 06 '17 at 07:02

Mosh Feu · Answer 1 · 2017-09-06T07:27:10.293

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">

@Mosh Feu in this case the alt text wont be shown if image is not loaded. Here is a https://jsfiddle.net/cg6rh4Lu/1/ — brk, Sep 06 '17 at 05:52
@Ihazkode Thanks but I think he wants to show the `alt` after the image "physically" loaded to the page. — Mosh Feu, Sep 06 '17 at 06:10
@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, Sep 06 '17 at 07:24

score 0 · Answer 2 · answered Sep 06 '17 at 05:58

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 06 '17 at 05:58

Prakash S

132
1
12

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. – Prakash S Sep 06 '17 at 06:47
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 [answer] – I haz kode Sep 06 '17 at 06:50
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 Sep 06 '17 at 09:44
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. – Prakash S Sep 06 '17 at 10:35
4

@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. – t.niese Sep 06 '17 at 15:40
Let's say I use tag for small thumbnail image like 20x20 px. If the image not found, my whole layout getting collapsed. If I remove alt attribute, my sonarqube friend will start shouting at me. – Ganesh Apr 08 '21 at 14:00

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

2 Answers2