I have a website with two pages. Both pages share the same CSS body properties.

When you click the button I have on the home page, it will bring you to a page with a scroll bar. When this page is displayed, the background shrinks/moves to the left just a tiny bit to accommodate for the scroll bar appearing. How can I stop this behavior?

I would like for the background image to be totally static. Here's a small snippet of the CSS.

html {
    min-height: 100%;
    cursor: url('Pictures/glove-lg.png'), auto;
}

body {
    display: flex;
    justify-content: center;
    font-family: 'Lora', serif;
    margin: .8em;
    background-color: #151b20;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(Pictures/backgroundDala.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

CodePudding user response：

The only way to avoid that is to use overflow-y: scroll for the body also on those pages whose contents is equal to or not more than 100% high.

That way a vertical scollbar will be displayed on each page and therefore the background will remain the same. Not a pretty solution, but the only one that keeps the background-image consistent.

CodePudding user response：

Use the margin-right property on whatever your parent div is or body (though I'm not 100% sure if the scrollbar is also under body, so if it is, it wont work. If it is, just make a parent div for everything inside body and outside everything else.)