I have a background image repeated on the Y axis in order to cover the whole page.
html {
background-image: url('https://www.bertamini.net/background.svg');
background-position-x: right;
background-size: 100% auto;
background-repeat: repeat-y;
background-color: blue;
}
The problem: when overscrolling the page, the background color is showed, in place of the image, which is unpleasant.
A demo of this:
html {
background-image: url('https://www.bertamini.net/background.svg');
background-position-x: right;
background-size: 100% auto;
background-repeat: repeat-y;
background-color: blue;
}
.tall {
background-color: red;
height: 200vh;
}
<div class="tall">
A tall div
</div>
is there a way in order to extend the background image to cover the overscroll effect? Is the overscroll-behavior: none;
or the background-color
the only way to avoid this?
1.) If you add a div with a background-color (your
.tall
div) , it will cover the page background. That's the reason that in your example everything is red. So, erase that background-color to see the page background.2.)
background-position-x
is an invalid parameter.Look at the setting sbelow, this is the way you seem to want it(?):