I'm currently working on a webpage that involves using a background image with an inset opaque panel.
My goal is to have the panel stretch all the way down to the bottom of the page, with some padding at the bottom for spacing.
Additionally, I want the padding around the panel to be consistent on all sides. It should adjust in size based on the display and be responsive.
I've experimented with various height properties in the HTML, body, and panel styles (such as min-height, max-height, height), but it seems to only work when fixed pixel values are used. Below is the CSS and HTML code I've been using.
Any suggestions on how to achieve this layout would be greatly appreciated.
html {
height: 100%;
background: url(images/background_blurred.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
height: 100%;
background: transparent;
color: rgb(240, 240, 240);
}
.panel {
height: 100%;
background-color: rgba(10, 10, 10, 0.8);
}
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
</div>
</div>
</div>
</body>