Overflow:auto; vs. position:fixed;

Is one way better here to keep the background always filling the screen?

overflow:auto;
https://jsitor.com/lnQaem9m5T

.containerb {
  position: absolute;
  top: 0;
  left: 0;
  /* bottom: 0;*/
  right: 0;
  width: 100%;
  overflow: auto;
  /*height: 100%;*/
  min-height: 100%;
  background-image: 
}

position:fixed;
https://jsitor.com/wdpWLcJlH

 .containerb:before{
    content:"";
    position:fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:inherit;
  }

Before

After

The question is loaded as it all depends on situation.

The background slides away because the element is only 100% wide but its child is wider than that. The scrollbar appears on the viewport to allow you to scroll to see the bit sticking out but that bit that sticks out is greater than 100% so there will be no background behind it from its parent.

If you add overflow:auto to the parent then the child remains within the parent and is scrolled within the parent and not by the viewport scrollbar. If you had other elements following below that background then you would see the scrollbar only on the element itself and not on the viewport as it looks at present.

The position:fixed trick just shims a fixed background over the viewport and fixed backgrounds don’t scroll with the viewport so you don’t lose the background.

The correct solution as I mentioned before is most likely replace the background on the root element and then it can’t scroll away. Of course that depends on whether you have other elements on the page and other concerns for other elements.

There is no one right answer to all occasions.

Doing as you suggested, how would I get the background to fill the whole background area behind the buttons?

I removed the background off of .containerb

You suggested doing this before, but I was not able to figure it out.

https://jsfiddle.net/m94L75ja/

https://jsitor.com/ksVkz023w

<div class="containerb hide"></div>

<div class="background2 "> </div>

.containerb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    /*width: 582px;*/
    min-width: 582px;
    align-content: center;
}
.background2 {

 background-image:
    linear-gradient(green 5px, #0000 5px),
    linear-gradient(90deg, green 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(green 25px, #0000 25px 145px, green 145px),
    linear-gradient(90deg, green 25px, #0000 25px 145px, green 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(green 45px, #0000 45px 125px, green 125px),
    linear-gradient(90deg, green 45px, #0000 45px 125px, green 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(green 65px, #0000 65px 105px, green 105px),
    linear-gradient(90deg, green 65px, #0000 65px 105px, green 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(green, green);
  background-size: 165px 165px;
  animation: fadeBody 5s ease forwards;
}

@keyframes fadeBody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Something like this:

.containerb {
    display: flex;
     flex:1 0 0%;
     opacity: 0;
  animation: fade 5s ease  0s forwards;
     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;
}
.containerb-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    width: 582px;
    min-width: 582px;
    align-content: center;
}
<div class="containerb hide">
      <div class="containerb-inner">
			<div class="playButton b1" data-audio="http://getradio.me/svoefm">
etc....
1 Like

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