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(":ANd9GcQJr81CRJeZGFiBsA9_AOyyxegiIPctdcbNfHThnpnclmFH-mJwoQ");
}

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

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./images?q=tbn:ANd9GcQJr81CRJeZGFiBsA9_AOyyxegiIPctdcbNfHThnpnclmFH-mJwoQ");
}

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

• javascript
• html
• css

• Try to use div tags other than img tag to avoid showing alt text. Better to use img tag incase of image failure... – Nandakumar Commented Sep 6, 2017 at 5:43
• Check the answer here stackoverflow./questions/4216035/… – Ovidiu Unguru Commented Sep 6, 2017 at 5:46
• @brk Could you tagged jquery in your question? – Ataur Rahman Munna Commented Sep 6, 2017 at 5:55
• @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/ataur63/4w5aywzc – Ataur Rahman Munna Commented Sep 6, 2017 at 6:54
• naturalWeight should be naturalWidth. My mistake in typo. :) – Ataur Rahman Munna Commented Sep 6, 2017 at 7:02

2 Answers 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./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 pletion 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="test" alt="My background image" data-image="https://encrypted-tbn0.gstatic./images?q=tbn:ANd9GcQJr81CRJeZGFiBsA9_AOyyxegiIPctdcbNfHThnpnclmFH-mJwoQ">

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.