I'm trying to make a div cover my whole page. Currently, the problem is that it is only covering the size of the viewport (for example 1920x1080px).
That's the CSS for the div I'm using at the moment:
#cursor-container {
position: absolute;
z-index: 99999;
pointer-events: none;
overflow-x: auto;
background-color: rgba(0, 0, 0, 0.25);
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
At the moment, it looks like this:
But it should look like this:
How can I fix this?
first, make sure that the div you are using is the child of the body element, then change the position to position: fixed; ,
#cursor-container {
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
z-index: 99999;
pointer-events: none;
overflow-x: auto;
background-color: rgba(0, 0, 0, 0.25);
}
This will make sure that your div stays fixed at the screen even if the page scrolls down and it will cover the whole screen
also, set the parent's width and height to 100% as well,
html, body {
width: 100%;
height: 100%;
}
Related
I have a problem. I know the bug that exists with backdrop-filter when I use it on a parent div that has child divs that use position: absolute. So I decided to do the blur effect using the :before, but the problem comes when I use the position: relative on the parent div, because inside there are other child divs using position: absolute that I want to fill the whole monitor.
Here is an example.
body {background: url(https://images.adsttc.com/media/images/5d44/14fa/284d/d1fd/3a00/003d/large_jpg/eiffel-tower-in-paris-151-medium.jpg?1564742900)}
.paris {position: relative; width: 200px; height: 200px; background: #0000004d}
.paris:before {content: ""; position: absolute; width: 100%; height: 100%; backdrop-filter: blur(10px); top: 0; left: 0; display: block}
.london {position: absolute; background: red; width: 100%; height: 50px; top: 50px}
<div class="paris">
<div class="london"></div>
</div>
If I remove the position: relative from the class named "Paris", it will bug the backdrop-filter as it will fill the whole screen with blur, but if I include it, it will bug the div class named "London", as it will no longer occupy 100% of the screen, but the one of the parent div.
What alternative do I have?
(I can't change the order because the site is not mine, it's a forum that doesn't allow to change the order of the code).
that's what I would suggest
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background: url(https://images.adsttc.com/media/images/5d44/14fa/284d/d1fd/3a00/003d/large_jpg/eiffel-tower-in-paris-151-medium.jpg?1564742900);
}
.paris {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
position: relative;
}
.london {
position: absolute;
background: red;
width: 100%;
height: 50px;
top: 50px;
}
<div class="paris">
<div class="london"></div>
</div>
I have a problem concerning my HTML background video.
I found some articles on Stack Overflow, and added it to my HTML and CSS.
But it does not seem to work, it either will not become responsive or it messes with my other divs and elements.
I have a picture:
(the container of the video element has background color yellow)
And here is the code:
.container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49);
font-size: 0;
background-color: yellow;
margin: auto;
z-index: -1000;
}
.container video {
min-width: 100%;
min-height: 100%;
width: auto;
position: absolute;
height: auto;
max-height: 100%;
width: 100%;
}
As you can see, the video width does not adjust to the screen size. I tried object-fit but this will make it not responsive.
The trick is to make your container height: 0 then apply the aspect ratio of the video as padding-bottom on the container. You get the aspect ratio of the video by dividing the height by the width and multiplying by 100 to get a percentage value. Then position your video to take up the entire space in the container.
The video in my example is 320x176. (176 / 320) * 100 = 55%.
* {margin:0;}
.container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 0;
overflow: hidden;
box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49);
font-size: 0;
background-color: yellow;
margin: auto;
z-index: -1000;
padding-bottom: 55%;
}
.container video {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
<div class="container">
<video src="https://www.w3schools.com/html/mov_bbb.mp4" loop autoplay></video>
</div>
If you want the video to always fill 100% width and 100% height of your container, no matter the ratio, then you should go with overflow:hidden, and play with the position top,right,bottom,left attributes if you want to center it.
.container .video{
min-width:100%;
min-height:100%;
overflow:hidden;
}
This did the trick for me what i desired for desktop at least:
.container{
width: auto;
height: 100%;
position: absolute;
bottom: 0px;
top: 0px;
background-color: yellow;
z-index: -1000;
overflow: hidden;
box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49);
margin: auto;
font-size: 0;
}
.container video{
min-width: 100%;
min-height: 100%;
position: static;
top: 0;
left:0;
height: 100%;
width: 100%;
object-fit: fill;
}
for mobile I will give it a different rule, cause now the video changes aspect ratio (which I desired).
I have a div inside a container class. The div is called panel:
.panel {
width: 100%;
background: url(img/launch1.png);
height: 80%;
background-size: cover;
background-position: center;
position: relative;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
}
The container:
.container {
position: absolute;
top: 0;
width: 100%;
left: 0;
margin: auto;
overflow: hidden;
}
Whenever I change the .panel's position to relative, it just disappears and is no longer visible. It's still in the site itself but it places itself somewhere outside of the monitor. Not sure what's wrong here. Any fresh eyes that can help me out?
Solved, the container needed a height: 100%!
I think you just have to set a height for the .container.
.container {
width: 100%;
height: 100%;
left: 0;
top: 0;
margin: auto;
position: absolute;
overflow: hidden;
}
Otherwise, you need to set a value in pixel for the .panel height, and not a percentage.
Tried to make a website menu with three full screen background overlays, but background video (underlying) in that menu is shifted down. What is wrong with positioning markup?
CSS:
.videoContainer {
position: relative;
width: 100%;
height: 100%;
//padding: 20px;
border-radius: 1px;
overflow: hidden;
}
.videoContainer video {
min-width: 100%;
min-height: 100%;
position: relative;
z-index: -5;
}
.videoContainer .overlay-vid-1 {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
background: black;
opacity: 0.5;
}
P.s. - tried playing with z-index, position: and <div> reordering, but no luck.
P.p.s. - yes, i know, this is not the whole code, but system informer said that I can`t paste whole code, so there is a link to codepen, thank you.
You need to change the position of your video to position: absolute; because it's being pushed down by the .overlay-content. Try changing your CSS to look like this:
CSS
.videoContainer video {
min-width: 100%;
min-height: 100%;
position: absolute; /* Change to absolute */
top: 0px; /* Set top to 0px */
z-index: -5;
}
Updated CodePen
I was wondering if there's a way to block the scroll bar until a div and its loader gets to the point of display none. I don't know if this can be done just with html or css. Any advice?
#loader {
background: #eeeeee;
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
display:block;
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 9999;
}
#loaderInner {
background:#eeeeee url(https://dl.dropboxusercontent.com/s/asdfghfdsas/loader.gif) center center no-repeat;
background-size: 250px 250px;
position: absolute;
height: 250px;
width: 250px;
display:block;
margin: 0 auto;
top: 50%;
left: 50%;
margin: -125px 0px 0px -125px;
}
body#layout #loader {
display:none;
overflow: scroll;
}
You can use some simple CSS to prevent scrolling on the page. But you would need to use JS to handle when to apply this class.
CSS
body.loading {
overflow: hidden;
}
Another solution is to put loader div with fixed position, so there's no need to hide the scrollbar (which can cause a strange user experience):
#loader {
position: fixed;
top: 0;
left: 0;
...
}
The div will show while scrolling
In this case you wouldn't need the "body.loading" rule.
The loader scrolling due to the positioning, so we can easily remove the scroll by changing the position css to position:fixed;
it will 100% work.......
#loader {
position: fixed;
background: #eeeeee;
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
display:block;
margin: 0 auto;
overflow: hidden;
z-index: 9999;
}
To me this is the best solution to delete the scroll bar while de Loader is display
html, body.loader {
overflow: hidden !important;
}