Bild, Box (en) Browserfüllend anzeigen

[Malon]

Ich würde gerne mehrere Boxen untereinander einblenden. Jetzt Box soll so BREIT und HOCH sein wie der jeweilige Browser. In die zweite Box würde ich gerne ein Bild hinterlegen, das genauso BREIT und HOCH ist wie eben der Browser, bzw. die anderen Felder. Ich habe mich daran versucht, aber ich bekomme nicht das gewünschte Ergebnis zusammen.

#box1 {
background:#ff0000;
width:100%;
padding:100% 0 0 0;
}
		
#box2{
background:url("http://upload.wikimedia.org/wikipedia/commons/1/16/Satellitenaufnahme_der_Alpen.jpg") #aa0000 no-repeat 10px 20px;
width:100%;
padding:100% 0 0 0;
}	
	
#box3{
background:#BB0000;
width:100%;
padding:100% 0 0 0;
}	

<div id="box1">Box l</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>

Zur Ansicht habe ich es hier hinterlegt: http://result.dabblet.com/gist/2c80ef8d985710071657/155afd4252b88327c703389700597cf9f4d1d108

[Tabellenkalk]

Hallo,

Ich würde gerne mehrere Boxen untereinander einblenden. Jetzt Box soll so BREIT und HOCH sein wie der jeweilige Browser.

Das ist ja noch eine lösbare Forderung.

In die zweite Box würde ich gerne ein Bild hinterlegen, das genauso BREIT und HOCH ist wie eben der Browser, bzw. die anderen Felder.

Hier musst du noch nachlegen: selten sind die Höhen-Breiten-Verhältnisse von Bild und Fenster identisch. Wie willst du reagieren: verzerren oder abschneiden?

Gruß
Kalk

[Malon]

Das ist ja noch eine lösbare Forderung.

Ich habe sie noch nicht gelöst.

In die zweite Box würde ich gerne ein Bild hinterlegen, das genauso BREIT und HOCH ist wie eben der Browser, bzw. die anderen Felder.

vergössern, Wegschneiden

Also das mit dem Bild habe ich so hinbekommen, aber die grösse der Box will nicht funktionieren

http://dabblet.com/gist/51723af371268bb6282a

<div id="box1">
<div class="rahmen">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/16/Satellitenaufnahme_der_Alpen.jpg" alt="" title="" />
</div>
</div>

<div id="box2">Box 2</div>
<div id="box3">Box 3</div>

#box1 {
width:100%;
height:500px;
background:#000;
}

.rahmen {
width:100%;
height:100%;
background:#000;
position: relative;
overflow: hidden;
}
img {
min-width: 100%;
min-height: 100%;
position: absolute; 
bottom: 0 ;
}

		
#box2{
background:#ff0000;
width:100%;
padding:100% 0 0 0;

}	
	
#box3{
background:#BB0000;
width:100%;
padding:100% 0 0 0;
}	

[Malon]

Ich habe es gelöst. Das einzige was mir noch etwas kopfzerbrechen macht, ist das es beim IE8 abwärts nicht hinhaut.

http://dabblet.com/gist/77fa8f00a5754766d9c4

#box1 {
background: url("http://upload.wikimedia.org/wikipedia/commons/1/16/Satellitenaufnahme_der_Alpen.jpg") no-repeat center center;
-webkit-background-size: cover;
background-size: cover;
height: 100%;
}

		
#box2{
background:#ff0000;
width:100%;
padding:100% 0 0 0;

}	
	
#box3{
background:#BB0000;
width:100%;
padding:100% 0 0 0;
}	

[Matthias Apsel]

Hallo Malon,

Ich habe es gelöst. Das einzige was mir noch etwas kopfzerbrechen macht, ist das es beim IE8 abwärts nicht hinhaut.

Das sollte dir kein Kopfzerbrechen bereiten. getclicky

Falls du unter allen Umständen solch alte Browser unterstützen musst, kommst du um visuelle Abstriche oder erheblichen Mehraufwand nicht herum.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Malon,

Ich würde gerne mehrere Boxen untereinander einblenden. Jetzt Box soll so BREIT und HOCH sein wie der jeweilige Browser. In die zweite Box würde ich gerne ein Bild hinterlegen, das genauso BREIT und HOCH ist wie eben der Browser, bzw. die anderen Felder.

Größenangaben in Bezug auf die Abmessungen des Browserfensters kannst du über die Einheiten vw bzw. vh erreichen, die gewünschte Einstellungen für das Hintergrundbild entweder über background-size bzw. background-position.

• vh
• background-size
• background-position

Bis demnächst
Matthias