-1

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

AveFenix
  • 1
  • 1

2 Answers2

0

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

Edy
  • 149
  • 7
  • Thanks Edy. In fact, I have made it with WordPress. In the background image position menu i selected "center". I have indicated background-position-x and background-position-y because it appears on Inspect in this way – AveFenix Nov 24 '22 at 17:25
0
background-size:cover;
background-position: 50% 50%;
Crystal
  • 28
  • 7
  • Thanks Crystal. I have changed the value of background-position in my WordPress but it isn't changed in my posted WebSite. I have hired the hosting with Hostinger, do you know if i have to change the code inside the Hostinger. I don't know how to do it – AveFenix Nov 24 '22 at 17:46
  • using Hpanel to edit your script – Crystal Nov 24 '22 at 17:59
  • Definitely, It does not work with center center or with 50% 50% for my personal mobile in vertical position. – AveFenix Nov 24 '22 at 17:59
  • I have checked that the image is centered on the mobile of my friend (360px X 560px viewport) and displaced on my mobile (320px X 512 px viewport). – AveFenix Nov 24 '22 at 19:21