Versions-Historie des Beitrags „Bild, Box (en) Browserfüllend anzeigen“

Bild, Box (en) Browserfüllend anzeigen

bearbeitet von Malon 07.05.2015 16:29

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](http://result.dabblet.com/gist/2c80ef8d985710071657/155afd4252b88327c703389700597cf9f4d1d108)

Malon

bearbeitet von Christian Kruse 07.05.2015 16:35

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](http://result.dabblet.com/gist/2c80ef8d985710071657/155afd4252b88327c703389700597cf9f4d1d108)