Background isn't filling the entire screen

HTML-CSS
1

How do I get the gradient image to fill the entire screen?

Right now it is cut off.

To reproduce, click on the blue play image then scroll down.

https://jsfiddle.net/1tm4fujo/

 .containerb {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  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;
}
2

What is the reason you are setting position: absolute on the containerb div? This question might be a hint as to what you can do to solve this issue.

1 Like
3

Change it to this?

  .containerb {
  width: 100%;
  height: 100%;

Then the purple body is showing.

4

Should it be relative instead? @seekinfox

I can’t figure it out.

5

Why can’t I use absolute?

The background will not work without absolute.

Were you able to get it to work using something else?

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.