How would I be able to have the background fill the entire area?
https://jsfiddle.net/swabgeyr/
We’ve been through that a dozen times already.
if you are using height:100% then there is nothing below the fold. There is no 101%. Nothing below the 100% really exists. I’ve been through this many times with you and showed you examples of where its been cut off before.
If you use a min-height and remove bottom it should work here.
.containerb {
position: absolute;
top: 0;
left: 0;
/* bottom: 0;*/
right: 0;
margin: auto;
width: 100%;
/*height: 100%;*/
min-height:100%;
background-image: linear-gradient(teal 5px, #0000 5px),
linear-gradient(90deg, teal 5px, #0000 5px),
linear-gradient(black 10px, #0000 10px 160px, black 160px),
linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
linear-gradient(black 20px, #0000 20px 150px, black 150px),
linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),
linear-gradient(black 30px, #0000 30px 140px, black 140px),
linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),
linear-gradient(black 40px, #0000 40px 130px, black 130px),
linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),
linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),
linear-gradient(black 50px, #0000 50px 120px, black 120px),
linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),
linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),
linear-gradient(black 60px, #0000 60px 110px, black 110px),
linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),
linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),
linear-gradient(black 70px, #0000 70px 100px, black 100px),
linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),
linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),
linear-gradient(black 80px, #0000 80px 90px, black 90px),
linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),
linear-gradient(teal, teal);
background-size: 165px 165px;
}
1 Like
Under all circumstances, I should not be able to see the body color, right?
https://jsfiddle.net/e9kfu5v0/4/
.containera {
position: absolute;
top: 0;
left: 0;
/* bottom: 0;*/
right: 0;
margin: auto;
width: 100%;
/*height: 100%;*/
min-height:100%;
background-image:
No, the background is on .containera. That has nothing to do with the body.
Containera is only as tall as you have made it or the content it contains. The video is absolutely placed and removed from the flow and therefore does not affect the height of .containera. When you scroll and the video sticks out it makes no difference to containera as it doesn’t know it has any content to cover.
Your issues are often compounded by your use of absolute positioning and not allowing content to remain in the flow or at least make sure the flow is controlled. I have given numerous examples of this.
3 Likes
If it’s being done through the javascript, how would min-height:100%; be added to it?
I tried doing this: That did not work.
document.body.style.minHeight = "100%";
Nothing I am trying seems to be working.
https://jsfiddle.net/1pu4Ly3t/
All of this stuff isn’t working.
.containerb {
position: absolute;
top: 0;
left: 0;
/* bottom: 0;*/
right: 0;
margin: auto;
width: 100%;
/*height: 100%;*/
min-height:100%;
}
I’ve explained before about how absolute elements are removed from the flow and will not stretch a parent background. I’ve also explained that height:100% means 100% and no more so you cannot scroll to see anything else because that would be greater than 100%.
The only real quick fix I can see is to add position:fixed overlay when you add the fade class.
e.g.
Add this code:
.bodyfadea body:before,
.bodyfadeb body:before{
content:"";
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background:inherit;
}
Otherwise that page would need to be built from the ground up taking into account the behaviour you require and avoiding fixed heights and much absolute positioning.
5 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.