The location of an background image appears not centered when publishing my Website

Question

I have indicated a background image and centered it in its container with:

background-size:cover;
background-position-x:50%;
background-position-y:center;

I use the "Responsive Design Mode" tool to check how the image looks, and it occupies the entire container and is centered in it for any viewport width.

Well, when publishing the Website on the Internet (it's my first time) the image appears shifted to the left on my personal mobile (vertical position). Even weirder, when I place my phone horizontally, the image appears centered.

I would like the image to always appear centered in its container. Does anyone know what is happening?

Thanks

Answer 1

The way that i use to center backgrounds is the following

background-position:center center:

In that way the background will be forced to be at the center, I dont know if that will help you in your posted website

Answer 2

background-size:cover;
background-position: 50% 50%;