djsony90 djsony90 - 6 months ago 23
CSS Question

Fallback background-image if default doesn't exist

I want to set an image as a background, however the image name might be either

bg.png
or
bg.jpg
.

Is there any non-javascript way to create a fallback to an alternative image if the default background doesn't exist?

body{
background: url(bg.png);
background-size: 100% 100%;
width: 100vw;
height: 100vh;
margin: 0;
}

Answer

You can use multiple backgrounds if there has not transparency and occupy all available space or have the same size:

div{   
     background-image: url('http://placehold.it/1000x1000'), url('http://placehold.it/500x500');
     background-repeat:no-repeat;
     background-size: 100%;
     height:200px;
     width:200px;
}
<div></div>

If the first doesn't exit, the second will see.

div{   
     background-image: url('http://placehol/1000x1000'), url('http://placehold.it/500x500');
     background-repeat:no-repeat;
     background-size: 100%;
     height:200px;
     width:200px;
}
<div></div>