Horizontal site using Flex Box & divs w/ background-image
I'm trying to create a demo for a horizontal site using Flex Box made up of images as placeholders. I'm trying to use div with background images. I'd like the divs to autoscale vertically to the size of the window but fit to the width of the background image.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS 3 horizontal site demo</title>
<style type="text/css">
.main {
display: box;
display: -moz-box;
display: -webkit-box;
}
.panels {
开发者_Python百科background-repeat:no-repeat;
background-position:center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
#panel-1 {
background-image: url(scen1.png);
}
#panel-2 {
background-image: url(scene2.png);
}
#panel-3 {
background-image: url(scene3.png);
}
</style>
</head>
<body>
<div class="main">
<div id="panel-1" class="panels"><h1>First Panel</h1></div>
<div id="panel-2" class="panels"><h1>Second Panel</h1></div>
<div id="panel-3" class="panels"><h1>Third Panel</h1></div>
</div>
</body>
</html>
Instead, the images are filling to the size of the content. Any CSS3 gurus have the solution?
Thanks!
Position it absolutely and specify top and bottom:
.main {
display: box;
display: -moz-box;
display: -webkit-box;
position: absolute;
top: 0;
bottom: 0;
}
加载中,请稍侯......
精彩评论