background-size responsive image AND div - html

Question

I have a web site with fixed background image.
When scrolling, This image is recovered by a text block.
Keeping scrolling, the text block goes up and another background image is revealed.
Scrolling again and another text block recover the fixed background image... etc.
I got some codes on the internet to do that and all this works.
I want my background to fit the width of the screen responsively.
My problem is I can make my image resize correponding to the width size of the browser, BUT the div block containing the image fit the height of the browser. Let's say, on mobile device I have my little image at the top of my page, and nothing below, unless I scroll... then the text block comes up on he screen and recover the BG image...
So I would like my BG image fit the width of the browser and the div fit the height of the image...
Is that possible or should I change my design?
Thanks a lot.
/* --------------------------------
Primary style
-------------------------------- */
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
font-family: "Roboto", sans-serif;
color: #3d3536;
background-color: #1f1f1f;
}
body, html {
/* important */
height: 100%;
}
a {
color: #b4d7a8;
text-decoration: none;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 90%;
max-width: 768px;
margin: 0 auto;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
/* --------------------------------
Main components
-------------------------------- */
.cd-main-content {
/* you need to assign a min-height to the main content so that the children can inherit it*/
height: 100%;
position: relative;
z-index: 1;
}
.cd-fixed-bg {
position: relative;
min-height: 100%;
width: auto;
/*background-size: cover;*/
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
background-position: center 52px;
z-index: 1;
background-attachment: fixed;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 90%;
max-width: 1170px;
text-align: center;
font-size: 30px;
font-size: 1.875rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
color: white;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
.cd-fixed-bg.cd-bg-2 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
.cd-fixed-bg.cd-bg-3 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
.cd-fixed-bg.cd-bg-4 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
#media only screen and (min-width: 768px) {
.cd-fixed-bg h1, .cd-fixed-bg h2 {
font-size: 36px;
}
.cd-fixed-bg {
/*background-position: center 70px;
/*height: 100%; */
}
}
#media only screen and (min-width: 1170px) {
.cd-fixed-bg {
/*background-attachment: fixed;*/
background-position: center 70px;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
font-size: 48px;
font-weight: 300;
}
}
.cd-scrolling-bg {
position: relative;
min-height: 100%;
padding: 4em 0;
line-height: 1.6;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
z-index: 2;
}
.cd-scrolling-bg.cd-color-1 {
background-color: #3d3536;
color: #a6989a;
}
.cd-scrolling-bg.cd-color-2 {
background-color: #99a478;
color: #3d3536;
}
.cd-scrolling-bg.cd-color-3 {
background-color: #b4d7a8;
color: #3d3536;
}
#media only screen and (min-width: 768px) {
.cd-scrolling-bg {
padding: 8em 0;
font-size: 20px;
font-size: 1.25rem;
line-height: 2;
font-weight: 300;
}
}
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<main class="cd-main-content">
<div class="cd-fixed-bg cd-bg-1">
<!--<img src="img/HEADER.png" class="cd-fixed-bg">-->
</div> <!-- cd-fixed-bg -->
<div class="cd-scrolling-bg cd-color-2">
<div class="cd-container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum quam. Mauris justo mauris, imperdiet quis metus ac, varius volutpat eros. Aliquam dapibus semper enim, vitae condimentum augue iaculis ac. Sed sit amet leo commodo enim tempus aliquet. Donec eu metus elit. Aenean rhoncus sapien ut mi ullamcorper, vitae blandit tortor lacinia. Suspendisse posuere eros nec lorem congue porttitor. Vivamus efficitur nulla vitae interdum mollis. Cras ut quam semper, interdum eros sit amet, vulputate purus. Ut facilisis bibendum cursus. Mauris rhoncus, justo eu molestie tempor, lorem sem vulputate arcu, quis mattis quam nibh a tellus. Phasellus semper arcu risus, vel blandit erat lobortis consectetur. Quisque pharetra tincidunt tortor sed laoreet. Nunc posuere, eros eget convallis tristique, lacus felis dictum magna, ac imperdiet dolor nunc et arcu.
Donec dui orci, pretium tincidunt sagittis ut, aliquam vel lorem. Donec pretium blandit mi in dictum. Fusce ligula lectus, sagittis eu orci eget, facilisis facilisis dolor. Duis at varius nibh. Integer pretium magna et egestas vulputate. Sed sed interdum orci. In vitae diam faucibus, dignissim erat et, convallis purus.
Aliquam placerat elit sem, ac efficitur augue vestibulum at. Curabitur nec leo posuere, varius elit id, sollicitudin erat. Sed ante odio, finibus luctus justo eget, lacinia venenatis nisl. Vestibulum nec felis quis risus porta lobortis. Suspendisse consectetur orci eget neque ornare, eu bibendum nibh bibendum. Nam ac ligula in sem iaculis posuere quis quis augue. Nulla laoreet nec nibh lobortis porta. Morbi feugiat, nisl nec fermentum interdum, enim sem maximus purus, vel vestibulum elit ligula et justo. Cras consequat ut lectus in viverra. Aenean tempor scelerisque elit. </p>
</div> <!-- cd-container -->
</div> <!-- cd-scrolling-bg -->
<div class="cd-fixed-bg cd-bg-2">
<h2>Lorem ipsum dolor sit amet.</h2>
</div> <!-- cd-fixed-bg -->
<div class="cd-scrolling-bg cd-color-3">
<div class="cd-container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum quam. Mauris justo mauris, imperdiet quis metus ac, varius volutpat eros. Aliquam dapibus semper enim, vitae condimentum augue iaculis ac. Sed sit amet leo commodo enim tempus aliquet. Donec eu metus elit. Aenean rhoncus sapien ut mi ullamcorper, vitae blandit tortor lacinia. Suspendisse posuere eros nec lorem congue porttitor. Vivamus efficitur nulla vitae interdum mollis. Cras ut quam semper, interdum eros sit amet, vulputate purus. Ut facilisis bibendum cursus. Mauris rhoncus, justo eu molestie tempor, lorem sem vulputate arcu, quis mattis quam nibh a tellus. Phasellus semper arcu risus, vel blandit erat lobortis consectetur. Quisque pharetra tincidunt tortor sed laoreet. Nunc posuere, eros eget convallis tristique, lacus felis dictum magna, ac imperdiet dolor nunc et arcu.
Donec dui orci, pretium tincidunt sagittis ut, aliquam vel lorem. Donec pretium blandit mi in dictum. Fusce ligula lectus, sagittis eu orci eget, facilisis facilisis dolor. Duis at varius nibh. Integer pretium magna et egestas vulputate. Sed sed interdum orci. In vitae diam faucibus, dignissim erat et, convallis purus.
Aliquam placerat elit sem, ac efficitur augue vestibulum at. Curabitur nec leo posuere, varius elit id, sollicitudin erat. Sed ante odio, finibus luctus justo eget, lacinia venenatis nisl. Vestibulum nec felis quis risus porta lobortis. Suspendisse consectetur orci eget neque ornare, eu bibendum nibh bibendum. Nam ac ligula in sem iaculis posuere quis quis augue. Nulla laoreet nec nibh lobortis porta. Morbi feugiat, nisl nec fermentum interdum, enim sem maximus purus, vel vestibulum elit ligula et justo. Cras consequat ut lectus in viverra. Aenean tempor scelerisque elit. </p>
</div> <!-- cd-container -->
</div> <!-- cd-scrolling-bg -->
<div class="cd-fixed-bg cd-bg-3">
<h2>Lorem ipsum dolor sit amet.</h2>
</div> <!-- cd-fixed-bg -->
</main> <!-- cd-main-content -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

Answer 1

The height of the div seems to be affected by the amount of text. As the screen size gets less wide, the text in the div takes up more vertical space. Try changing the min-height of the div to either a different percentage at that size. You can also try adding a max height giving the height a range of how large it should be.