This is the HTML code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
background: url("https://images.freeimages.com/365/images/previews/e2e/television-test-screen-no-signal-vector-illustration-7227.jpg") center center/cover no-repeat fixed;
}
</style>
</head>
<body>
</body>
</html>
Abnormal behavior: Chrome mobile displays the background image incorrectly, as if the screen is much taller, causing the center of the image to not be where it should be, but to be displayed much lower, where Chrome mobile thinks it is would be the center of the display.
If I tap the screen everything resets and the wallpaper appears as it should.
I'm saying that Chrome thinks that's where the center of the screen is because if I put another element to be centered in the middle of the screen, it will still be shown shifted down.
Expected behavior: The background image should be displayed with the center in the center of the screen.
I first created this example on a private server. To make sure it's not something server related, I duplicated this example on codepen.io as well.
Chrome mobile - first landing:
Chrome mobile after a tap - normal behavior:
Chrome mobile after a tap - normal behavior
I am using Galaxy S22 Ultra / Android 13 / Chrome 108.0.5359.128. I use incognito mode.
Where am I wrong?
1 Answer 1
Not sure but this is what I got. You want your image to be edited/transformed from the origin center. if that was the case
The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform.
transform-origin: center center;
Further more about transfer origin
Sorry if it wasn't what you are looking for, add more details for your need, photo edit the target that you want to reach using css