The background of my page mismatches with different browser window size

Question

Good afternoon, I am making a page with HTML + CSS and I have the following problem: I am programming with the screen divided between the VSCODE and the browser, and set the background of the body as follows:

           background-image: url('url da minha imagem');
           background-repeat: no-repeat;
           background-position: center;
           background-size: cover;
       }

When the browser is in split screen mode, the page is as I want, as shown in the image. Only when I open it full-screen, it’s disproportionate. Would there be some way for me to set up the site in full screen or some other way for me to solve this problem?

Answer 1

Basically it’s using the background-position: top center

This will leave bg always centered horizontally, but vertically the top of the image always sits at the top of the page.

See the image below, the red box is the image of bg, and the blue border the limits of the viewport