web-dev-qa-db-fra.com

Image de fond de secours si la valeur par défaut n'existe pas

Je souhaite définir une image comme arrière-plan, mais le nom de l'image peut être soit bg.png ou bg.jpg.

Existe-t-il un moyen non javascript pour créer un retour à une image alternative si l'arrière-plan par défaut n'existe pas?

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

Vous pouvez utiliser plusieurs arrière-plans s'il n'y a pas de transparence et qu'ils occupent tout l'espace disponible ou ont la même taille:

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 le premier ne quitte pas, le second sera affiché.

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>
43
blonfu

Pour spécifier plusieurs arrière-plans possibles, vous pouvez faire:

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

Cela définira l'arrière-plan sur bg.png s'il existe. S'il n'existe pas, il sera défini sur bg.jpg. Si aucune de ces images n'existe, l'arrière-plan sera défini sur la couleur statique green.

Notez qu'il priorisera toute image spécifiée en premier. Donc, si les deux images existent, il choisira bg.png au dessus de bg.jpg.

Découvrez la démo ici . Testez-le en cassant l'une des URL de l'image ".

8
Chris

Je voulais avoir une solution qui ne charge pas les images deux fois. Par exemple, le CDN avec un repli n'est pas très bon s'il charge toujours également les images originales. J'ai donc fini par écrire un Javascript pour manipuler le DOM CSS chargé.

var cdn = "https://mycdn.net/"; // Original location or thing to find
var localImageToCssPath = "../"; // Replacement, Css are in /css/ folder.

function replaceStyleRule(allRules){
  var rulesCount = allRules.length;

  for (var i=0; i < rulesCount; i++) 
  {
    if(allRules[i].style !== undefined && allRules[i].style !== null &&
        allRules[i].style.backgroundImage !== undefined &&
        allRules[i].style.backgroundImage !== null &&
        allRules[i].style.backgroundImage !== "" &&
        allRules[i].style.backgroundImage !== "none" &&
        allRules[i].style.backgroundImage.indexOf(cdn) > -1
            )
      {
        var tmp = allRules[i].style.backgroundImage.replace(cdn, localImageToCssPath);
        //console.log(tmp);
        allRules[i].style.backgroundImage = tmp;
      }
      if(allRules[i].cssRules !== undefined && allRules[i].cssRules !== null){
        replaceStyleRule(allRules[i].cssRules);
      }

  }
}
function fixBgImages(){
  var allSheets = document.styleSheets;
  if(allSheets===undefined || allSheets===null){
    return;
  }
  var sheetsCount = allSheets.length;
  for (var j=0; j < sheetsCount; j++) 
  {
    var allRules = null;
    try{
        allRules = allSheets[j].cssRules;
    } catch(e){
        // Access can be denied
    }
    if(allRules!==undefined && allRules!==null){
        replaceStyleRule(allRules);
    }
  }
}

// use fixBgImages() in e.g. onError
0
Tuomas Hietanen