Position DIV under Background Image, regardless of viewport (responsive)

Question

I have a big background image of 1920x550px and I want to place a div directly under it. Since I don't know how to display the full image, I used a dirty trick and actually filled the image with a transparent part so it is a 1920x1080 image, then I display it with this:

.bg-image-big{
    background: url(../images/header-bg-big.png) no-repeat center center fixed;
    background-color: #f7f7f7;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This stretches it to be always full screen. Two problems now: That does not work on mobile (cuts the image) and I have no idea how to place the inner div exactly below the "end" of the actual banner. In theory and a 1920x1080 screen it is a 550px margin-top.

<div class="section bg-light-gray bg-image-big">
   <div class="inner">
      <!-- placed right under the end of the banner -->
   </div>
</div>

Any better approach to that (pretty sure there is). Any hint appreciated!

For the matter of it, I am using Bootstrap3 and FullPage.js

//EDIT:

Visualization as per request:

What I want:

What I have: Full Desktop

Responsive

This is not about the 6/8/12 wide but about the position of those elements. hope this helps a little more...

Answer 1

A slightly different solution. You could control the ratio of the image container by using a canvas HTML Element inside of it. The only thing we would have to fix is the width of the container under the image. Have a look at this page to get a basic understanding how to use CSS Media Queries. http://www.w3schools.com/css/css_rwd_mediaqueries.asp

body {
  margin: 0;
}
canvas {
  display: block;
  width: 100%;
  height: auto;
}
.bg-image-big {
  background: url(http://viceland-assets-cdn.vice.com/viceblog/47451647MCQ-cloudcity.jpg) no-repeat center center;
  background-color: #f7f7f7;
  background-size: cover;
}
.wrapper {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #f0f0f0;
}
.inner {
  position: relative;
  display: block;
  width: 50%;
  padding: 30px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid black;
  text-align: center;
  box-sizing: border-box;
}
.inner p {
  display: none;
}


@media only screen and (min-width: 280px) {
  .inner {
    width: 100%;
  }
  .inner p.col-12 {
    display: block;
  }
  /* 12-Columns Width */
}

@media only screen and (min-width: 768px) {
  .inner {
    width: 66.66%;
  }
  .inner p.col-8 {
    display: block;
  }
  /* 8-Columns Width */
}
@media only screen and (min-width: 1024px) {
  .inner {
    width: 50%;
  }
  .inner p.col-6 {
    display: block;
  }
  /* 6-Columns Width */
}

<div class="bg-image-big">
  <canvas width="100" height="25" />
</div>
<div class="wrapper">
  <div class="inner">
    <p class="col-6">min-width: 1024px</p>
    <p class="col-8">min-width: 768px</p>
    <p class="col-12">min-width: 280px</p>
    <span>Behold, some content!</span>
  </div>
</div>

Answer 2

I had the same problem. Here's how I solved it.

The background image was attached to the body element. The original image size was 1920px by 1080px.

I calculated the ratio of the height to width, which came to 56.25.

For the element that I wanted to position below the image, I used this:

#page-area {
    margin-top: 56.25vw;
}

As the viewport width changes, the image height does too. So I set the margin-top to be the same height as the image.