CSS or Javascript - display fallback text if background image not loaded [duplicate]

Question

This question already has an answer here:

• CSS background image alt attribute 10 answers

How can I display text instead of logo, if the logo graphic file isn't loaded or missing? I have div with background PNG image:

<div class="iHaveBgImage">
this text should be displayed if bg image is not loaded
</div>

.iHaveBgImage { background-image: url('img.png') }

It doesn't have to be pure CSS, Javascript solution is allowed. I was thinking of onerror event, but it works with images, not elements that have image backgrounds.

EDIT: I was told this has been answered before, but there is another situation. I didn't say one can alter DOM, only apply CSS and JS. Second, in that other solution is sugested I should use title attribute and I tried it and it doesn't display text, only hovers it.

Answer 1

Try it this way:

HTML

<div class="iHaveBgImage">
  <p>this text should be displayed if bg image is not loaded</p>
</div>

CSS

.iHaveBgImage { background-image:
url('https://s31.postimg.org/yqv51r5xn/6936671_hd_wallpapers_for_ipad.jpg');
color:red;
}

.iHaveBgImage > p {
  position: relative;
  z-index: -1;
}

Works perfectly https://jsfiddle.net/s0gt2eng/

Answer 2

This is what I suggested in the duplicate tag:

.iHaveBgImage{
  width:500px;
  height:200px;
  background-image: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg');
  }

<div class="iHaveBgImage" title="this text should be displayed if bg image is not loaded">
</div>

Alternative using span tags:

span.image:before{
  content:" "; background:url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg');
  display: block;
  position:absolute;
  width:500px;
  height:200px;
}

  <span class="image">alternate text</span>

Answer 3

One workaround to this would be to change

<div class="iHaveBgImage">
this text should be displayed if bg image is not loaded
</div>

.iHaveBgImage { background-image: url('img.png') }

To :

<img src="img.png" alt="Seems like this image failed to load" />

Alternatively I am not sure if the following would work, but you can MAYBE do something along the lines of:

<img class="iHaveBgImage" alt="Seems like this image failed to load" />

.iHaveBgImage { background-image: url('img.png') }

EDIT: Something that just popped up in my head that could possibly also work would be to have:

<div class="iHaveBgImage">
<p class="bgText">this text should be displayed if bg image is not loaded</p>
</div>

.iHaveBgImage { 
background-image: url('img.png') 
}
.bgText {
  z-index: -9999;
}

Answer 4

Try this

P.hidden {
    visibility: hidden;
}
.iHaveBgImage {
  background-image: url('https://s31.postimg.org/yqv51r5xn/6936671_hd_wallpapers_for_ipad.jpg');
  color: red;
width:700px;
  height:300px;
}

<div class="iHaveBgImage">
   <p class="hidden> This text should be displayed if bg image is not loaded</p>
</div>

if you want to use text visible to text use <span></span> tag and create css span {display: block;} or

html

 <p class="hidden> This text should be displayed if bg image is not loaded</p>

CSS

P.hidden {
    visibility: hidden;
}