molily: background-size in background shorthand

Beitrag lesen

Wenn die Browser, die multiple Hintergründe unterstützen, mit denen übereinstimmen, die skalierte Hintergründe unterstützen:

Offenbar weitesgehend. IE 9 und Firefox 3.6 haben bspw. beides gleichzeitig implementiert. Die Webkits können beides schon seit Äonen.

Opera implementiert sie nicht gleichzeitig, aber das kann ich wohl vernachlässigen, da alle Operas, die background-size können, auch mehrere Hintergrundbilder unterstützen:
http://www.opera.com/docs/specs/presto24/#css (multiple backgrounds)
http://www.opera.com/docs/specs/presto26/#changes (background-size)

Ich glaube, dann nutze ich das eine Feature, um das andere zu erkennen. (Asche auf mein Haupt.) Technisch gesehen ist die Erkennung mit JavaScript natürlich korrekter, denn ich kann direkt auf background-size prüfen. Allerdings mache ich mir dadurch mein Separation of Concerns kaputt.

#foo

{
  background: url('https://graph.facebook.com/140216402663925/picture?type=small') center no-repeat;
  background: url('https://graph.facebook.com/140216402663925/picture?type=large') center no-repeat, none;
  background-size: cover;
}

  
Danke, auf die none-Idee bin ich nicht gekommen. Scheint ganz gut zu funktionieren. IE < 9 lädt das kleine Bild und ignoriert die zweite Angabe.  
  
<http://jsfiddle.net/ffmPz/4/>  
  
Mathias