Hallo,
ich versuche ein Fluid-Grid zu erstellen und habe dabei folgendes Problem, dass das background-image ohne px-basierte höhe/breite nicht angezeigt wird.
Wie bekomme ich es hin, dass das Bild vollständig angezeigt wird, jedoch mit % angaben? Es liegt irgendwie an der verschachtelung der div boxen.
Danke!
Hier ist der code abgelegt: http://jsfiddle.net/t3YZt/
ich versuche ein Fluid-Grid zu erstellen und habe dabei folgendes Problem, dass das background-image ohne px-basierte höhe/breite nicht angezeigt wird.
Wie bekomme ich es hin, dass das Bild vollständig angezeigt wird, jedoch mit % angaben? Es liegt irgendwie an der verschachtelung der div boxen.
Danke!
Hier ist der code abgelegt: http://jsfiddle.net/t3YZt/
HTML:
<div id="content" role="main" class="clearfix">
<div class="content-left">
img here
</div><!-- content-left -->
<div class="content-center">
<div class="content-singlepage--left">
<div class="content-singlepage--left__bigpic"></div>
</div>
<div class="content-singlepage--right">
test
</div>
</div><!-- content-center -->
<div class="content-right">
img here
</div><!-- content-right -->
</div><!-- #content -->
HTML:
html, body {
width: 100%;
height: 100%;
}
#content {
width: 836px;
}
.content-left, .content-right {
width: 4.186603%; /* 35 / 836 */
float:left;
}
.content-center {
width:91.507177%;
float:left;
}
.content-singlepage--left {
width: 51.633987%;
height: 100%;
}
.content-singlepage--left__bigpic {
background-image: url('http://media-cdn.tripadvisor.com/media/photo-s/02/e7/dc/22/akumal-beach-resort.jpg');
background-size: 100%;
width: 100%;
height: 100%;
}
.content-singlepage--right {
width: 48.366013%;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Zuletzt bearbeitet:
