DIV with video background and image sticking to its bottom doesn't work as expected

Question

I'm working of layout where top of page contains div with some images and video background and i have trouble making it to work right. When i made first version all looked right but problems started to come out when i wanted to make it work for different browser window widths. It looks as follows

Blue - DIV with video background, green - images, green with orange border - image that should be sticking to bottom of video in a way that half of its height is out of video, gray - regular page content.

I've ran into two issues, one is that i can't figure out way for image (orange border) to stay on bottom of video all the time with half of it out of video area. I'd like for it to be there all the time. Other images doesn't make so much problem with different browser window widths.

Second is background of DIV containing video, I've set it as placeholder in case browser doesn't support video tag. Containing DIV doesn't stretch to browser width as video does. I want it to be covered by video all the time - to change its size with change of video size.

Can someone suggest how to fix it to work desired way?

Here is code (width of page area on js fiddle might need adjusting to see the issue)

https://jsfiddle.net/yLmryL48/3/

body {margin: 0px;}
#video_box {
 width:100%;
 position:relative; height:720px;
 background: url("http://i.imgur.com/X3mb6AD.jpg"); -webkit-background-size: cover; 
   -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
#video_overlays {position:absolute; text-align:center; width:100%;}
#vt_logo, #vt_url { display:block;}
#vt_logo, #vt_url{display: block; width:50%;}
#vt_logo img, #vt_url img{display: inline-block;}
#vt_logo img{margin:50px 0 0 50px;}
#vt_url img{margin:50px 50px 0 0;}
#vt_logo {text-align:left; float:left;}
#vt_url {text-align:right; float:right;}
#slogan img{padding-top:110px; width:70%; height: auto;}
#slogan2 img{padding-top:110px; width:60%; height: auto;}
#icons img{padding-top:110px; width:70%; height: auto;}
#ccontainer {width: 100%; position: relative;}
#cvideo, #cmessage {width: 100%; height: 360px; position: absolute; top: 0; left: 0;}
#cvideo video {width: 100%;}
.banner_top { width: 100%; display: block;  padding-bottom:150px;}
#lipsum {width: 60%;  margin: 0 auto;}

<div class="banner_top">
<div id="video_box">
<div id="ccontainer">
<div id="cvideo">
<video preload="preload" autoplay="autoplay" loop="loop" muted poster="http://i.imgur.com/X3mb6AD.jpg"> 
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<div id="cmessage">
 <div id="video_overlays">
  <div id="vid_top">
   <div id="vt_logo">
    <img src="http://i.imgur.com/Od0DZBj.png">
   </div> 
   <div id="vt_url"> 
    <img src="http://i.imgur.com/ns80hYp.png">
   </div>
   <br style="clear:both;"/>
  </div>
  <div id="slogan">
   <img src="http://i.imgur.com/JrOXRf2.png">
  </div>
  <div id="slogan2">
   <img src="http://i.imgur.com/7mRLS9s.png">
  </div>
  <div id="icons">
   <img src="http://i.imgur.com/XEEAcQx.png">
  </div>
 </div>
</div>
</div>
</div>
</div>
</div>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tortor mi. Etiam bibendum pellentesque dignissim. Cras eu massa elit. Ut sit amet metus porta, hendrerit mauris at, elementum massa. Duis malesuada ac odio id faucibus. Mauris malesuada elementum dui luctus tempor. Integer in lacus vel risus dignissim vehicula eget vel purus. Sed non sollicitudin arcu. Cras ac ligula at nisl vulputate fringilla et non est. Etiam placerat volutpat eros id facilisis. Nunc sollicitudin ipsum ipsum, vestibulum rutrum sem dapibus quis.
</p>
</div>

Let the bg-image determine the content shape (image width: 100%, height: auto) and wrap it with relative div. Than all other content inside the wrapper place absolute above it, starting from video. The image will keep the aspect ratio and you will know where the video and bg-image ends. — skobaljic, Sep 10 '16 at 23:34

score 1 · Accepted Answer · edited May 23 '17 at 12:00

The video isn't covering the entire div because it is keeping its aspect-ratio. If you'd prefer to stretch it, you can use CSS's object-fit . As for the image that needs to be cut off 50%, you can use translateY(50%)

CSS:

body {
  margin: 0px;
}
#ccontainer {
  position:relative;
  width:100%;
  height:550px;
  background: url("http://i.imgur.com/X3mb6AD.jpg");
  background-size: cover;
  -webkit-background-size: cover; 
  -moz-background-size: cover;
  -o-background-size: cover;
}
#cvideo, #videooverlays {
  position:absolute;
  top:0;
  left:0;
}
#cvideo, #videooverlays, video {
  width:100%;
  height:100%;
}
video {
  image-fit:fill;
  object-fit:fill;
}
#vid_top {
  position:relative;
  top:50px;
  width:100%;
  height: auto;
}
#vt_logo {float:left; margin-left:50px;}
#vt_url {float:right; margin-right:50px;}
#slogan {position:relative; top:70px; width:100%; height:auto; text-align:center;}
#slogan img {
  width:50%;
}
#slogan2 {position:relative; top:70px; width:100%; height:auto; text-align:center;}
#slogan2 img {
  width:50%;
}
#icons {position:absolute; bottom:0; width:100%; height:auto; text-align:center;}
#icons img {width:70%;transform:translateY(50%);}
#lipsum {width: 60%;  margin: 0 auto;}

HTML:

<div id="ccontainer">
<div id="cvideo">
  <video preload="preload" autoplay="autoplay" loop="loop" muted poster="http://i.imgur.com/X3mb6AD.jpg"> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>
<div id="videooverlays">
  <div id="vid_top">
            <div id="vt_logo">
                <img src="http://i.imgur.com/Od0DZBj.png">
            </div>  
            <div id="vt_url">   
                <img src="http://i.imgur.com/ns80hYp.png">
            </div>
      <div style="clear:both;"></div>
      <div id="slogan">
        <img src="http://i.imgur.com/JrOXRf2.png">
      </div>
      <div id="slogan2">
        <img src="http://i.imgur.com/7mRLS9s.png">
      </div>
    </div>
        <div id="icons">
            <img src="http://i.imgur.com/XEEAcQx.png">
        </div>
    </div>
</div>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tortor mi. Etiam bibendum pellentesque dignissim. Cras eu massa elit. Ut sit amet metus porta, hendrerit mauris at, elementum massa. Duis malesuada ac odio id faucibus. Mauris malesuada elementum dui luctus tempor. Integer in lacus vel risus dignissim vehicula eget vel purus. Sed non sollicitudin arcu. Cras ac ligula at nisl vulputate fringilla et non est. Etiam placerat volutpat eros id facilisis. Nunc sollicitudin ipsum ipsum, vestibulum rutrum sem dapibus quis.
</p>
<p>
Mauris interdum erat id posuere tempor. Vivamus suscipit nisi nec laoreet pulvinar. Vestibulum luctus libero vel tortor blandit maximus. Proin consequat massa id eros convallis rhoncus. Curabitur et erat finibus, sollicitudin mi ac, suscipit eros. Duis gravida velit elit, vel tempus elit malesuada in. Cras viverra, sapien sed tincidunt bibendum, mauris ligula tempor sem, vitae placerat libero mauris ut neque. Nullam ullamcorper erat est, at laoreet metus imperdiet nec. Nam sit amet gravida quam, nec hendrerit ante. Vestibulum eros ex, lacinia ut tincidunt quis, hendrerit ut felis. Suspendisse in orci sodales, tincidunt leo nec, lobortis dui. Integer ac magna purus. Praesent porta a dolor ut rutrum.
</p>
<p>
Curabitur ac sodales enim, vitae luctus eros. Mauris ac accumsan leo. Vestibulum tristique pretium nibh vel interdum. Duis vitae velit vel neque pretium condimentum. Vestibulum id lacus a nisl rhoncus tempus. Nullam varius quis tellus eget pharetra. Aliquam vitae purus id ex sodales bibendum sed quis dui. Ut bibendum neque turpis, ut vehicula massa egestas eget. Ut maximus sapien a leo porttitor dignissim. Suspendisse varius iaculis turpis non pulvinar. Morbi sit amet pellentesque nulla. Ut non ipsum quis mauris rhoncus luctus. Praesent posuere tincidunt nisl, at rutrum magna aliquet ac. Praesent et ex id sapien rhoncus ultricies non at orci. Donec vel iaculis metus. Donec convallis sit amet nisi id faucibus.
</p>
<p>
Phasellus id commodo risus, ut faucibus elit. Integer ornare blandit magna, ac pharetra neque porta nec. Maecenas consectetur, odio ac maximus fringilla, libero tellus egestas leo, in vulputate elit risus non nulla. Maecenas ac tempor sem. Phasellus placerat sollicitudin orci. Nunc sit amet tellus at sapien semper consequat at quis libero. Duis auctor in tortor sit amet congue.
</p>
<p>
Nunc at venenatis felis. Maecenas in lobortis tortor. Aenean id metus mattis, sodales dui non, ornare est. Donec nec condimentum lorem. Nullam ac nisi consequat, venenatis lorem quis, suscipit tortor. Cras a posuere ex, sodales pellentesque leo. Nulla nibh lectus, tincidunt non metus sit amet, rutrum fringilla quam. Cras id condimentum lectus. Donec et nulla turpis. Duis et nisi iaculis, aliquet orci sit amet, porta massa. Donec finibus vulputate lacus et mattis. Integer laoreet eros ut cursus porta. Proin id lectus elit. Proin imperdiet nec arcu at imperdiet.
</p></div>

Thanks for your answer but now video gets deformed and that is unacceptable. Way video behaved before was kind of what i was looking for just that one image at bottom and background did not behaved as it should, can you suggest anything else but in direction of these two things i mentioned? — MoreThanChaos, Sep 11 '16 at 00:28
I managed to make it all work, suggestions form begging of your answer helped a lot to get on right path — MoreThanChaos, Sep 18 '16 at 21:32

DIV with video background and image sticking to its bottom doesn't work as expected

1 Answers1