CSS - Grafik automatisch anpassen

[iWorm]

Bastel gerade an einem Seite rum. Als Hintergrund habe ich ein bestimmtes Muster genommen, das sich wiederholt.

body {  
background-image: url(../pattern.jpg);  
}

Nun will ich über die ganze Seite ein png-Bild (mit transparenten Flächen) strecken, das sich automatisch an die Fenstergröße anpasst (vllt iwie mit width:100%; height:100%). Meine Frage ist es: Kann ich dieses Bild noch i-wie in den body-CSS einbetten? Wenn ja, wie? Wenn nicht, wie sollte ich es besser machen?

[dave]

Hi,

multiple-backgrounds und background-size.

~dave

[iWorm]

background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);

Vielen Dank, das ist das, was ich gesucht habe :)

[Gunnar Bittersmann]

@@iWorm:

nuqneH

Meine Frage ist es: Kann ich dieses Bild noch i-wie in den body-CSS einbetten?

Ja, mit CSS 3 sind sowohl mehrere als auch skalierte Hintergrundbilder möglich.

Moderne Browser können das.

Für veraltete Browser siehst du als Fallback ein unskaliertes Hintergrundbild vor. Dass deine Seite nicht ganz so mit Hintergrund geschmückt ist, sollte doch nicht stören.

Browser haben noch Schwierigkeiten mit der Kurzschreibweise "<bg-position>/<bg-size>" bei der 'background'-Eigenschaft, deshalb per 'background-size' angeben.

body  
{  
	background: url(../pattern.jpg) repeat;  
	background: url(foo.png) left top no-repeat, url(../pattern.jpg) repeat;  
	background-size: 100% 100%, auto;  
}

Damit die Höhe richtig skaliert werden kann, muss dafür gesorgt werden, dass das Element auch die Viepoerthöhe füllt. Das ist fürs 'html'-Element deutlich schmerzloser zu realisieren als für 'body'. Es ist also sinnvoll, 'html' den Hintergrund zu geben.

Qapla'

[iWorm]

Danke für die Antwort :)

Damit die Höhe richtig skaliert werden kann, muss dafür gesorgt werden, dass das Element auch die Viepoerthöhe füllt. Das ist fürs 'html'-Element deutlich schmerzloser zu realisieren als für 'body'. Es ist also sinnvoll, 'html' den Hintergrund zu geben.

Was meinst du damit :"'html' den Hintergrund zu geben" bzw wie?

[Gunnar Bittersmann]

@@iWorm:

nuqneH

Damit die Höhe richtig skaliert werden kann, muss dafür gesorgt werden, dass das Element auch die Viepoerthöhe füllt. Das ist fürs 'html'-Element deutlich schmerzloser zu realisieren als für 'body'. Es ist also sinnvoll, 'html' den Hintergrund zu geben.

Was meinst du damit :"'html' den Hintergrund zu geben" bzw wie?

Hm, was ist an „dem 'html'-Element den Hintergrund geben“ so unverständlich?

html  
{  
        background: url(../pattern.jpg) repeat;  
        background: url(foo.png) left top no-repeat, url(../pattern.jpg) repeat;  
        background-size: 100% 100%, auto;  
}

Qapla'