CSS или Javascript - отображать резервный текст, если фоновое изображение не загружено

Как отображать текст вместо логотипа, если графический файл логотипа не загружен или отсутствует? У меня есть div с фоновым изображением PNG:

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

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

Он не должен быть чистым CSS, разрешение Javascript разрешено. Я думал о событии onerror, но он работает с изображениями, а не с элементами, которые имеют фоновые изображения.

EDIT: Мне сказали, что на это уже был дан ответ, но есть и другая ситуация. Я не сказал, что можно изменить DOM, применять CSS и JS. Во-вторых, в том, что другое решение sugested, я должен использовать атрибут title, и я попробовал его, и он не отображает текст, но только его.

Ответы

Ответ 1

Попробуйте так:

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;
}

Работает отлично https://jsfiddle.net/s0gt2eng/

Ответ 2

Это то, что я предложил в дублирующем теге:

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

Ответ 3

Обходным путем для этого было бы изменить

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

В качестве альтернативы я не уверен, что следующее будет работать, но вы можете MAYBE сделать что-то в соответствии с:

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

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

РЕДАКТИРОВАТЬ: Что-то, что только что появилось в моей голове, которое могло бы также работать, состояло в следующем:

<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;
}

Ответ 4

Попробуйте это

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>