CODEWITHSUNDEEP
htmlcss
factordog
factordog

Reputation: 597

Positioning a div below a fixed position div

I have 3 main divs. A header, a video background and a content div.

The first two are fixed positions. I am wanting the content div to go below the video background. However because the video scales based on the width of the device, I get the two #landbg and .para1 overlapping. Is there a specific way to make them go below one another and stay there constantly even when the browser is scaled? I have tried using margin-top on the .para1. Here is a fiddle to see how it all works. http://jsfiddle.net/gyc24cm6/2/ basically the red bar must be positioned the large black square that scales height with browser size.

HTML: 

    <div id="landbg">
        <video loop muted autoplay class="landing_video">
            <source src="video/landingbg.mp4" type="video/mp4">
        </video>
    </div>
    <div class="para1">
        <div class="para_wind" data-parallax="scroll" data-image-src="images/bg1.png">
            <img src="images/bg1.png">  
        </div>
    </div>

CSS: 

#landbg{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.landing_video{
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
}
/*Parallax 1 Styling*/
.para1{
    width: 100%;
}
.para_wind img{
    width: 100%;
    height: 200px;
}

Upvotes: 0

Views: 1361

Answers (1)

partypete25
partypete25

Reputation: 4413

There's a technique I use sometimes for situations like this where I use a transparent image, with the same aspect ratio as the area I want to maintain (in this case, use the same dimensions of the video) but i dont want to set an actual height as i want the device width to control that.

transparent image to maintain aspect ratio

<div class="container">
  <img src="http://ima.gs/transparent/000/Transparent-350x160.png" alt="">
  <div class="inner"></div>
</div>

.container {
  position: relative;
}

.container img {
  width: 100%;
  height: auto;
}

.container .inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: lightblue;
  z-index: -1;
}

The transparent image will scale and maintain it's proportions, and will occupy it's space in the markup allowing your other content to continue after it.

Upvotes: 2

Related Questions