Consider:

    @mixin pseudo-element-background {
        content: ""; 
        background-size: cover;
        background-position: top;
        // background-attachment: fixed; // distorts the image
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
    
    div {
        position: relative;
        width: 20rem;
        max-height: 10rem;
        overflow-y: auto;
        
        &::before {
            background-image: url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg);
          
            @include pseudo-element-background;
        }
    }

    <div>
    <h1>Text1</h1>
    <h1>Text2</h1>
    <h1>Text3</h1>
    <h1>Text4</h1>
    <h1>Text5</h1>
    <h1>Text6</h1>
    <h1>Text7</h1>
    <h1>Text8</h1>
    <h1>Text9</h1>
    <h1>Text10</h1>
    </div>

Here is the CodePen.

When one scrolls, he discovers white background, whereas I would like the background image to cover the whole content. Note that the background image has to be in the pseudo-element. I tried ideas from here to no avail. I could also put a negative value for bottom in the mixin, but I do not know what value to put so it would cover the whole content. So, how do I achieve this?

In addition, I would like to fix the background position, but uncommenting the line background-attachment: fixed; distorts the background. I would like to understand why this happens and how to fix it.

CodePudding user response：

The problem with the pseudo element absolute is that it scrolls with the content.

Try putting the background direct on the element instead:

div {
  position: relative;
  width: 20rem;
  max-height: 10rem;
  overflow-y: auto;
  background-image: url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg);
  background-size: 100% 100%;
}

<div>
  <h1>Text1</h1>
  <h1>Text2</h1>
  <h1>Text3</h1>
  <h1>Text4</h1>
  <h1>Text5</h1>
  <h1>Text6</h1>
  <h1>Text7</h1>
  <h1>Text8</h1>
  <h1>Text9</h1>
  <h1>Text10</h1>

</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I found this post and here is a working solution based on it:

.container {
  width: 300px;
  height: 150px;
  overflow-y: auto;
  &>div{
    position: relative;
    &:before {
      content: "";
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      background-position: center;
      background-image: url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg);
    }
  }
}

<div class="container">
  <div>
    <h1>Text1</h1>
    <h1>Text2</h1>
    <h1>Text3</h1>
    <h1>Text4</h1>
    <h1>Text5</h1>
    <h1>Text6</h1>
    <h1>Text7</h1>
    <h1>Text8</h1>
    <h1>Text9</h1>
    <h1>Text10</h1>
  </div>
</div>

Here is the CodePen.

I think the idea is to add a parent and make the scrolling belong to the parent, so that now the whole scrollable content of the child is part of the child's height. This makes it possible to use height:100% in the pseudo-element.