Gunnar Bittersmann: CSS - Grafik automatisch anpassen

Beitrag lesen

@@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'

--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)