Fallback Backgrounds when Image is missing

Question

I want to have a fallback Background only if the Image that is supposed to be the Background is missing.

This is what I got: background: url(\'img/items/image.png\') , url(\'img/items/fallback.png\')

But in this case both backgrounds are shown at the same time. Don´t know why.

That's the way `background-image` is supposed to work. You probably will have to test for the image availability with JavaScript and deal with the results. — Pointy, Aug 08 '21 at 15:42
but this Thread says it should work like I want it to. https://stackoverflow.com/questions/22287474/onerror-event-using-background-url — Lucas Tea, Aug 08 '21 at 15:49
that's not a fallback but two background layers on the top of each other — Temani Afif, Aug 08 '21 at 15:50
@LucasTea read again that thread, it's not saying what you are saying — Temani Afif, Aug 08 '21 at 15:50

score 2 · Accepted Answer · answered Aug 08 '21 at 16:28

As you can notice from the comments under your post, there is no such thing as a fallback but you always can find a way to solve the problem. Also keep in mind that sometimes when you come up with an unusual solution there is always be a price: performance, readability, etc.

For your situation I can suggest some ideas how you can solve that:

Use two images (those mustn't be transparent)

background-image: url("defaultImage.png"), url("backupImage.png"); background-position: 0 0, 0 0; background-repeat: no-repeat, no-repeat;
Use two nested HTML elements, for instance. Styling them and add background-image for both.
In css add pseudo elements through :before{content:" "; background:url(backup.png); display: block; position:absolute;}

Fallback Backgrounds when Image is missing

1 Answers1