Dynamische Hintergrundgrafik

[Alice]

Hallo.

Ich habe auf einer Webseite eine Hintergrundgrafik. Die Grafik ist in "Full HD". Also 1920px...

Nun habe ich folgenden CSS-Code eingebaut:

	background: url('background.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

Meine Frage:

Es ist zwar schön, dass das Bild sich wirklich an jede Größe (egal wie klein) anpasst, aber ich hätte schon gerne eine Mindestgröße, damit sich das Layout (rein optischer Mangel) nicht zerschisst. Bei z.B. 800px soll schluss mit der Skallierung sein.

Wie könnte ich das umsetzen? Google hat mich nicht weiter gebracht... Ich hoffe, ihr könnt mir helfen.

 

[tombe]

Das solltest du mit Hilfe von "media queries" und der Angabe der entsprechenden Bildschirm-/Seitengröße lösen können!

Habe jetzt leider kein Beispiel zur Hand aber wenn du mal die Suchmaschine deiner Wahl nach "media querie" durchsuchst, solltest du Beispiele dazu finden.

So wie hier zum Beispiel.

 

[Alice]

Das ganze gefällt mir sehr gut, wird aber vom IE nicht unterstützt. Daher vorerst unbrauchbar, da biele (zuviele...) meiner User den IE nutzen.

Andere Möglichkeiten?

 

[tombe]

Schau mal was hier so geschrieben steht.

 

[tombe]

Falls das Thema noch nicht zufriedenstellend erledigt ist, vielleicht hilft das ja weiter.

<style type="text/css">
body {
	margin: 0px;
}
#div {
	position: absolute;
	top: 0px;
	left: 0px;
	min-width: 800px;
}
#img {
	width: 100%;
	height: auto;
}
</style>
<div id="div"><img id="img" src="background.jpg" /></div>

Hier wird das "Hintergrundbild" nicht als solches eingebunden sondern als normales Bild in einen absolut positionierten DIV-Container.

Das Bild bekommt als Größe immer 100% des Containers und der Container selbst bekommt als Mindestgröße 800 Pixel zugewiesen.

 

[CPoly]

Das ganze gefällt mir sehr gut, wird aber vom IE nicht unterstützt. Daher vorerst unbrauchbar, da biele (zuviele...) meiner User den IE nutzen.

Media queries seit IE 9. "background-size: cover;" ebenfalls erst seit IE 9. Wo ist das Problem?