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

Question

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.

No, it's not duplicate. I didn't say one can alter DOM, only apply CSS and JS. Second, in that solution is sugested to use title attribute and I tried it and it doesn't display text, only hovers it. — Dalibor, Jun 20 '16 at 08:50
ok, check my answer I have suggested an alternative using span. — Ani Menon, Jun 20 '16 at 09:13

score 4 · Accepted Answer · answered Jun 20 '16 at 09:15

4

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/

answered Jun 20 '16 at 09:15

Chukwuemeka Onyenezido

329
2
5

2

Your solution does not work if the image has transparency – Manuel Ferreiro Sep 01 '16 at 16:57
1

@ManuelFerreiro This solution was given in direct response to the OP whose question did not include opacity or transparency. – Chukwuemeka Onyenezido Sep 08 '16 at 12:22
@ManuelFerreiro If you need to use an image with opacity, consider using an tag and then use the onerror event to display the text whenever the image does not load. – Chukwuemeka Onyenezido Sep 08 '16 at 12:36

score 3 · Answer 2 · edited May 23 '17 at 12:24

3

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>

edited May 23 '17 at 12:24

Community

1
1

answered Jun 20 '16 at 09:12

Ani Menon

27,209
16
105
126

I tried first solution with title attribute, but the fallback text doesn't show, only tooltip. – Dalibor Jun 20 '16 at 22:19
As for second solution, what happens if the image is smaller than fallback text? – Dalibor Jun 20 '16 at 22:20
@Dalibor Its obvious the text will be seen if the image is smaller. Use js to hide and show text onerror. – Ani Menon Jun 21 '16 at 04:02

Xariez · Answer 3 · 2016-06-20T09:02:17.680

-1

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

edited Jun 20 '16 at 09:02

answered Jun 20 '16 at 08:10

Xariez

759
7
24

The first solution won't work without altering DOM (only CSS and JS). The latter won't work because I don't use position absolute and I don't want to because all is aligned as it should be. – Dalibor Jun 20 '16 at 09:14
Alright! Fair enough. Still, if you want one function, you must be ready to, eventually, sacrifice another (or atleast, re-do a previous one). I am guessing you already know this, but wanted to get that out there :) – Xariez Jun 20 '16 at 09:18

Codeone · Answer 4 · 2016-06-20T09:39:44.013

-1

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

edited Jun 20 '16 at 09:39

answered Jun 20 '16 at 08:23

Codeone

1,173
2
15
40

And how will the span be made visible if the image can't be loaded? – Mr Lister Jun 20 '16 at 08:31
updated my answer, look at this – Codeone Jun 20 '16 at 08:38
Its displayed even when the image is loaded. – Ani Menon Jun 20 '16 at 08:39
what do you mean(when the image is loaded)not clear your question – Codeone Jun 20 '16 at 08:39
In your solution, both text and image are visible. Text should be visible only if the image is not loaded or doesn't exist. – Dalibor Jun 20 '16 at 08:53
use width and height https://fiddle.jshell.net/t4pj9et4/1/ – Codeone Jun 20 '16 at 09:21
Your output: [Text is displayed](http://i.imgur.com/VL2IWwe.png?1) – Ani Menon Jun 20 '16 at 09:28
@AniMenon now its fine, – Codeone Jun 20 '16 at 09:32
@Codeone If you hide it, then it will never be displayed even when the image is not displayed. – Ani Menon Jun 20 '16 at 09:35
he sayed `Text should be visible only ` i used `span` tag but his not accepted the answer – Codeone Jun 20 '16 at 09:37

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

4 Answers4

Linked