fehlerhafte/unbekannte Deklarationen

[Matthias Apsel]

Om nah hoo pez nyeetz, alle!

Folgendes CSS sollte mMn dazu führen, dass Browser, welche keine multiplen Hintergründe beherrschen, eines der Hintergrundbilder anzeigen.

body /* browser, die keine multiplen Hintergründe können */
{
	background-image: url('bild1.jpg');
	background-repeat: no-repeat;
	background-position: top;
}
body
{
	background-color: #abcdef;
	background-image: url('bild1.jpg'), url(bild2.jpg');
	background-repeat: no-repeat, no-repeat;
        background-position: top, bottom;
}

Auch wenn man die Regelsätze zu einem zusammenfasst, zeigen die IE < 9 dann gar kein Hintergrundbild an. Gibts da einen Grund für?

Matthias

[Der Martin]

Hallo,

background-image: url('bild1.jpg'), url(bild2.jpg');

Auch wenn man die Regelsätze zu einem zusammenfasst, zeigen die IE < 9 dann gar kein Hintergrundbild an. Gibts da einen Grund für?

liegt's vielleicht an dem einen unpaarigen Anführungszeichen?

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

liegt's vielleicht an dem einen unpaarigen Anführungszeichen?

nein, das war nur ein cnpe. Im Original sind sie immer doppelt vorhanden. Auch " oder ' macht keinen Unterschied.

Matthias

[Daniel.S]

Grüße dich, Matthias,

nein, das war nur ein cnpe. Im Original sind sie immer doppelt vorhanden. Auch " oder ' macht keinen Unterschied.

Laut F12 akzeptieren IE 8 und früher "url(), url()" als gültigen Wert (verstehen ihn nur leider nicht). Da muss man wohl mit den ungeliebten Kommentaren für die alten IEs nacharbeiten.

Schade, dass man das nicht früher entdeckt hat.

Gruß, Daniel

[Matthias Apsel]

Om nah hoo pez nyeetz, Daniel.S!

Laut F12 akzeptieren IE 8 und früher "url(), url()" als gültigen Wert (verstehen ihn nur leider nicht). Da muss man wohl mit den ungeliebten Kommentaren für die alten IEs nacharbeiten.

Ja, ist dann wohl so. Eine Lösungsvariante für die, dies interessiert

body /* ein Bild für alle Browser */
{
  background-image: url('Bild1');
}
#a#b, body /* zwei Bilder für alle Browser außer IE8 */
{
  background-image: url('Bild1'), url('Bild2');
}
* html body /* ein Bild für IE6 */
{
  background-image: url('Bild1');
}
* + html body /* ein Bild für IE7 */
{
  background-image: url('Bild1');
}

Matthias

[molily]

Laut F12 akzeptieren IE 8 und früher "url(), url()" als gültigen Wert (verstehen ihn nur leider nicht).

Er versteht den Wert als eine URL. Notiert man url('a'), url('b'), so fordert IE die URL »a),%20url(b« vom Server an.

Da muss man wohl mit den ungeliebten Kommentaren für die alten IEs nacharbeiten.

Nicht unbedingt.

Eine Lösungsvariante für die, dies interessiert

body /* ein Bild für alle Browser */

{
  background-image: url('Bild1');
}
#a#b, body /* zwei Bilder für alle Browser außer IE8 */
{
  background-image: url('Bild1'), url('Bild2');
}

• html body /* ein Bild für IE6 */
  {
    background-image: url('Bild1');
  }
• • html body /* ein Bild für IE7 */
    {
      background-image: url('Bild1');
    }

  
Erscheint mir unnötig kompliziert. Eine andere Lösungsvariante:  
  
~~~css
background: url('eins');  
background: url('eins'), url('zwei');

Look mom, no hacks.
Gegebenenfalls muss man dort die anderen background-*-Eigenschaften angeben, die werden sonst bekanntlich mit ihren Defaults überschrieben.

Das lässt sich auch noch weiter treiben, siehe etwa </archiv/2011/7/t205790/>.

Mathias

[molily]

Gegebenenfalls muss man dort die anderen background-*-Eigenschaften angeben, die werden sonst bekanntlich mit ihren Defaults überschrieben.

Habe gerade gesehen, dass du die in deinem Ursprungsposting natürlich gesetzt hast. Das sähe übertragen dann so aus:

body {  
  background: url('bild1.jpg') top no-repeat #abcdef;  
  background: url('bild1.jpg') top no-repeat, url('bild2.jpg') bottom no-repeat #abcdef;  
}

Mathias

[Matthias Apsel]

Om nah hoo pez nyeetz, molily!

Look mom, no hacks.

Danke, shorthand ist doch manchmal zu was gut.

Matthias