CODEWITHSUNDEEP
javascripthtmlcss
Lucas Tea
Lucas Tea

Reputation: 3

Fallback Backgrounds when Image is missing

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.

Upvotes: 0

Views: 433

Answers (1)

Ghost Rider
Ghost Rider

Reputation: 207

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:

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

  2. Use two nested HTML elements, for instance. Styling them and add background-image for both.

  3. In css add pseudo elements through :before{content:" "; background:url(backup.png); display: block; position:absolute;}

Upvotes: 2

Related Questions