DIV position in background image, regardless of viewing area (responsive)

Question

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

.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 always stretches it to full screen. Two problems now: this does not work on mobile devices (reduces the image), and I don’t know how to place the inner div exactly under the "end" of the actual banner. In theory and on the screen, 1920x1080 is the upper border of 550 pixels.

<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 this (sure there are). Any hint appreciated!

Bootstrap3 FullPage.js

//EDIT:

:

:

:

6/8/12, . , ...

Answer 1

. canvas HTML- . , , - . , , CSS Media. 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>

Hide result

Answer 2

, - , bg-image-big, position ; div relative, :

.bg-image-big{
    margin:0px;
    padding:0px;
    position:relative;
    display:inline-block;
    background: url(http://viceland-assets-cdn.vice.com/viceblog/47451647MCQ-cloudcity.jpg) no-repeat center center fixed;
    background-color: #f7f7f7;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height:40vh;
    width:100%;
}

.inner {
    position: absolute;
    display: inline-block;
    padding:30px;
    left:50%;
    bottom:-100px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width:50%;
    background:white;
    border: 5px solid black;
    text-align:center;
}

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

Hide result