デフォルトが存在しない場合のfallback background-image

Question

イメージをバックグラウンドで設定したいのですが、イメージ名はbg.pngまたはbg.jpgです。

デフォルトの背景が存在しない場合、代替画像へのフォールバックを作成するためのjavascript以外の方法はありますか？

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

Answer 1

あなたは透明性があっていない場合は、複数の背景を使用すると、すべての利用可能なスペースを占有したり、同じ大き持つことができます。最初は終了していない場合は、2番目に表示される

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>

を。

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>

Answer 2

複数の可能な背景を指定するには、あなたができる：それが存在する場合は

background-color: green; 
    background-image: url('bg.png'), url('bg.jpg'); 

これはbg.pngに背景を設定します。存在しない場合は、bg.jpgに設定されます。これらのイメージが1つも存在しない場合、背景はスタティック​​の色に設定されます。

最初に指定された画像に優先順位を付けます。両方の画像が存在する場合、bg.jpgを超えてbg.pngが選択されます。

demo hereをチェックしてください。イメージURLのいずれかを破棄してテストします。