html css video opacity problem..

Question

#video-background {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
z-index: -1;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url('main.mp4');
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
}

im having trouble getting the video to go slightly see through at the bottom of the video using code without editing the video in an editor. my attempt has failed several times. im still trying several other methods only using css but every method so far has failed. any suggestions?

Answer 1

web dev is admittedly not my strong suit, but:
* I don't think background-image supports video files
* Even if it did, I believe that using a gradient + an image from a file will just display both, not multiply them

something to try: layer a gradient over the top of the video instead that's the same color as the background. Limited flexibility (has to be a solid background color or another simple gradient), but might achieve the effect you're looking for

Answer 2

Orin Cook I'll post an update for this shortly. Thank you. I'll try it out n let you guys know. I'm really attempting as much as I can atm without using any JavaScript to test CSS's strength.

Answer 3

RollCall your code is incomplete and don't share the code in description like that

https://www.w3schools.com/jsref/prop_style_opacity.asp#:~:text=The%20opacity%2Dlevel%20of%20an,and%200%20is%20completely%20transparent.

Hope it's helpful to you

Answer 4

The seamless gif worked much better with the code. Was just using the video as texture anyway. So this seemed like a faster lower memory usage method.

Answer 5

I got it to work but not the way I wanted. It added opacity to the video but not a faded opacity.. thinking of going seamless gif loop is preferred for this method.