# How Can I Create A Fixed Attachment Video Background. Help Please!

**URL:** <https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838>\
**Category:** How To\
**Created:** [September 4, 2020, 12:02am UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838 "2020-09-04T00:02:12Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![tgary719](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/t/f05b48/32.png) [@tgary719](https://community.wpbeaverbuilder.com/u/tgary719)\
**Post date:** [September 4, 2020, 12:02am UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/1 "2020-09-04T00:02:12Z")

</div>

Hi there! I am trying to figure out how I can make the video background to stay fixed as you can do with images. I have tried tons of CSS and keep failing.

The video I am looking to make a fixed background video attachment is located on the homepage of the site at the very top. [https://milehighexchangors.com/](https://milehighexchangors.com/)

To make the css easier I gave the row containing the video a class of ‘my-row’. I feel like it should be simple css such as I have below, however it is not working. Please Help!

#my-row.fl-row-bg-video .fl-row-content {

background-attachment: fixed;

}

Thanks!

---

<div class="post-metadata">

**Author:** ![tgary719](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/t/f05b48/32.png) [@tgary719](https://community.wpbeaverbuilder.com/u/tgary719)\
**Post date:** [September 4, 2020, 6:01am UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/2 "2020-09-04T06:01:28Z")

</div>

I know there are some CSS whizes that this is cake to lol

---

<div class="post-metadata">

**Author:** ![janet4now](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/janet4now/32/2524_2.png) [@janet4now](https://community.wpbeaverbuilder.com/u/janet4now)\
**Post date:** [September 4, 2020, 3:45pm UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/3 "2020-09-04T15:45:22Z")

</div>

I don’t see a video there now, but if you want to do a full background of video:

video {  
object-fit: cover;  
width: 100vw;  
height: 100vh;  
position: fixed;  
top: 0;  
left: 0;  
}

---

<div class="post-metadata">

**Author:** ![tgary719](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/t/f05b48/32.png) [@tgary719](https://community.wpbeaverbuilder.com/u/tgary719)\
**Post date:** [September 4, 2020, 5:57pm UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/4 "2020-09-04T17:57:28Z")

</div>

Hi!

So there is a video background playing behind the words " JOIN THE MOST AMAZING R/E EXCHANGE GROUP IN COLORADO" at the very top of [https://milehighexchangors.com/](https://milehighexchangors.com/) just below the header.

Thanks again for any help. I think the part causing trouble may have to do with fixing the div and the video. Not sure though.

Thanks for any help!

---

<div class="post-metadata">

**Author:** ![janet4now](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/janet4now/32/2524_2.png) [@janet4now](https://community.wpbeaverbuilder.com/u/janet4now)\
**Post date:** [September 6, 2020, 6:04pm UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/5 "2020-09-06T18:04:25Z")

</div>

You have to use position:fixed to get the div to stay put.

---

<div class="post-metadata">

**Author:** ![tgary719](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/t/f05b48/32.png) [@tgary719](https://community.wpbeaverbuilder.com/u/tgary719)\
**Post date:** [September 6, 2020, 7:43pm UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/6 "2020-09-06T19:43:04Z")

</div>

Hi again!

So everytime I set the div as fixed position it pulls up the divs beneath it like shown in this screenshot. Even when i set the div beneath its position to fixed it still floats up.

Thanks again for all your help!

 ![fixed pos div](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9d8bd567981717b710ec49ae38e87844383704ce.jpeg)

---

<div class="post-metadata">

**Author:** ![janet4now](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/janet4now/32/2524_2.png) [@janet4now](https://community.wpbeaverbuilder.com/u/janet4now)\
**Post date:** [September 6, 2020, 9:44pm UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/7 "2020-09-06T21:44:46Z")

</div>

With a fixed position is doesn’t take up any space so you’ll have to add margin to the proceeding elements so they stack properly starting out. I believe then they will overlap as you scroll. That was want you wanted?

---

<div class="post-metadata">

**Author:** ![tgary719](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/t/f05b48/32.png) [@tgary719](https://community.wpbeaverbuilder.com/u/tgary719)\
**Post date:** [September 7, 2020, 1:11am UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/8 "2020-09-07T01:11:14Z")

</div>

Ok! You are amazingggg! Completely forgot to add margins. The last issue I am having a problem with is the z-index on these two divs. I want the bottom div (my-roww) to cover up the top div (my-row) on scroll, whereas currently the top div (my-row) covers the secondary on scrolling. I set the second dive to 999 and it still isnt working. I also tried setting the first dive to a negative value but then it was just a white div.

Here is my Css so far:

#my-row{

```
position:fixed;
width: 100%;
z-index: 1 !important;

```

}

#my-roww{  
z-index: 999 !important;  
}

Thanks again for your help!

---

<div class="post-metadata">

**Author:** ![tgary719](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/t/f05b48/32.png) [@tgary719](https://community.wpbeaverbuilder.com/u/tgary719)\
**Post date:** [September 7, 2020, 1:19am UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/9 "2020-09-07T01:19:42Z")

</div>

Ok I lied. I got that part fixed because the secondary div wasnt positioned as fixed as well. Noooow the issue I have is with the footer not being attached. I am sure this is because it is normally positioned relative in the theme and the rest are fixed, whats an easy way to fix that one?

---

<div class="post-metadata">

**Author:** ![tgary719](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/t/f05b48/32.png) [@tgary719](https://community.wpbeaverbuilder.com/u/tgary719)\
**Post date:** [September 7, 2020, 1:29am UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/10 "2020-09-07T01:29:43Z")

</div>

I suppose a better question would be to ask if I now have to position every element as fixed or if there is a way to make it still relative to the dive above.

Thanks!

---

<div class="post-metadata">

**Author:** ![tgary719](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/t/f05b48/32.png) [@tgary719](https://community.wpbeaverbuilder.com/u/tgary719)\
**Post date:** [September 7, 2020, 1:44am UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/11 "2020-09-07T01:44:24Z")

</div>

I lied again lol! Figured it out. Thanks for allllll of your amazing help!

---

<div class="post-metadata">

**Author:** ![janet4now](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/janet4now/32/2524_2.png) [@janet4now](https://community.wpbeaverbuilder.com/u/janet4now)\
**Post date:** [September 7, 2020, 10:45am UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/12 "2020-09-07T10:45:33Z")

</div>

So glad you got it figured out!!

---

<div class="post-metadata">

**Author:** ![ubaid001](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/ubaid001/32/3767_2.png) [@ubaid001](https://community.wpbeaverbuilder.com/u/ubaid001)\
**Post date:** [February 20, 2024, 6:31pm UTC](https://community.wpbeaverbuilder.com/t/how-can-i-create-a-fixed-attachment-video-background-help-please/12838/13 "2024-02-20T18:31:53Z")

</div>

I am new to video editing and still can’t understand how to do this. Can somebody tell me please?