html - que - Imagen de fondo alternativa si el valor predeterminado no existe

que atributo de html se emplea normalmente en la etiqueta que define un formulario

Question

Quiero establecer una imagen como fondo, sin embargo, el nombre de la imagen puede ser bg.png o bg.jpg .

¿Hay alguna forma no javascript para crear un respaldo a una imagen alternativa si el fondo predeterminado no existe?

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

Answer 1

Para especificar múltiples fondos posibles, puedes hacer:

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

Esto establecerá el fondo en bg.png si existe. Si no existe, se establecerá en bg.jpg . Si ninguna de esas imágenes existe, el fondo se establecerá en el color green estático.

Tenga en cuenta que priorizará cualquier imagen que se especifique primero. Entonces, si ambas imágenes existen, elegirá bg.png sobre bg.jpg .

Echa un vistazo a la demostración aquí . Pruébalo rompiendo cualquiera de las urls de imagen ''.

Answer 2

Puede usar múltiples fondos si no hay transparencia involucrada y ocupan todo el espacio disponible o tienen el mismo tamaño:

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>

Si el primero no sale, se mostrará el segundo.

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>