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...

Please edit your question and 1. Add a visual representation of desired output OR 2. add more meaningful description, as this is nor clear enough — Pmpr, Feb 23 '16 at 09:29
We would appreciate a jsFiddle demo and screenshots of current vs desired output. I would advise you NOT to add "blank space" to the image and seeing how big it is, PNG files are too large already, go for a JPEG and no spacing. As for making a div under the image, you can just create a `div` **under** your bg-image-big instead of **INSIDE** it, if that is not an option then you'd have to go for the `position:absolute;bottom:0` way for the `inner` div. More information required. — Aziz, Feb 23 '16 at 09:30
why not use a regular tag, and place your content after it; then target what you want with regular css — RGLSV, Feb 23 '16 at 09:40
edited question. @Crispy-George because the FullScript.js places content into the center of the `section` so I need absolute positioning I think — PrimuS, Feb 23 '16 at 09:51
@PrimuS so basically you want on mobile/responsive part that image to be full height/size of the screen? maybe your container doensnt calculate the correct height in responsive modes; try to force it with the height: 100vh, and check what happens — RGLSV, Feb 23 '16 at 10:04

Roland Krinner · Answer 1 · 2016-02-23T21:08:03.463

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>

score 2 · Answer 2 · answered Feb 17 '20 at 00:43

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.

score 0 · Answer 3 · answered Feb 23 '16 at 14:38

I think you're on the right track - I feel as though you might need to define the minimum height of the bg-image-big, as well as defining the position type as relative; because the position of the exterior div has been defined as relative you should be able to do the following:

.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>

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

3 Answers3