0

html css video opacity problem..

#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?

11th May 2023, 4:54 AM
RollCall
RollCall - avatar
5 Answers
+ 3
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
11th May 2023, 6:08 AM
Orin Cook
Orin Cook - avatar
+ 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.
11th May 2023, 2:24 PM
RollCall
RollCall - avatar
+ 1
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
11th May 2023, 5:01 AM
Sakshi [Offline 🙃]
Sakshi [Offline 🙃] - avatar
+ 1
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.
11th May 2023, 8:25 PM
RollCall
RollCall - avatar
0
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.
11th May 2023, 8:24 PM
RollCall
RollCall - avatar