Background Not Responding to Phone Rotation

Themes
1

Hello! I have gotten pretty far in my efforts to customize the London theme the way I want it, but I am having a problem I can’t solve. The way I did it: I set a background image for the body. To make text legible over it, I created three images that use transparency to fade into a paper texture, one for post-content-header, one for post-content-body, and one for gh-foot. For a desktop design, this is set up to create a 520px wide safe area for text; for mobile, the paper texture should cover the whole screen, left and right. I have had no end of trouble figuring out why the design uses negative margins and how to get the post-content-header, post-content-body, and gh-foot images to actually stretch to the end, but I came up with something that mostly works. Here is the mobile query:

@media screen and (max-width: 767px) {
  body {
    background-size: 100%;
  }

  .post-content-header {
    background-image: url("/assets/images/cc-mobile-post-content-header-bg.png");
    margin-left: -40px;
    margin-right: -40px;
    padding-left: 20px;
    padding-right: 20px;
    background-position-x: center;
    background-position-y: bottom;
    background-size: 850px 100%;
    background-repeat: repeat-x no-repeat;
  }

  .post-content-body {
     background-image: url("/assets/images/cc-mobile-post-content-body-bg.png");
     margin-left: -40px;
     margin-right: -40px;
     padding-left: 20px;
     padding-right: 20px;
     background-size: 850px 320px;
     background-position-x: center;
     background-repeat: no-repeat round;
   }

   .gh-foot {
     background-image: url("/assets/images/cc-mobile-gh-foot-bg.png");
     background-size: 850px 100%;
     max-height: 66px;
     margin-left: -40px;
     margin-right: -40px;
     padding-left: 20px;
     padding-right: 20px;
     background-position-x: center;
     background-position-y: top;
     background-repeat: no-repeat;
   }
}

This renders fine in any responsive-design test I throw at it, but it fails miserably if I rotate my phone . Here’s what it looks like in portrait mode–you can see the blueprints fading out with the whole horizontal stretch of the screen covered:

IMG_0231
IMG_02311170×2532 514 KB

And here is what it looks like if I rotate the screen. Not only do the background image and transparent overlay fail to extend to the edges of the screen, there’s a small area where the transparent overlay does not extend as far as the background image.

IMG_0232
IMG_02322532×1170 452 KB

Here is a closeup of the transparency not completely covering the background:

Screen Shot 2025-04-25 at 11.19.33 AM
Screen Shot 2025-04-25 at 11.19.33 AM669×421 46.7 KB

It seems to work okay and switch back and forth normally when I resize a browser window, and it works fine if I stay in portrait mode, but landscape mode is a disaster. I am so close to having this site working and being able to get to writing content instead of struggling with CSS and handlebars, but getting the backgrounds to work correctly is killing me. What am I missing? My site is unlocked for now, at https://thecriterioncontraption.com.

Thank you so much for your help with this!

2

Does anybody have any idea what’s going on here or how to fix it? I can’t find a good explanation of why the negative margins exist to begin with, but I’d be happy with the minimum viable option here, where the background redraws with the phone rotation. Would having the background set to repeat-x help?

3

Content will be visible within the browser safe area, leaving a right and left space. That’s normal in landscape mode. So your background image won’t exceed that safe area.

I have not tried to work around this before, but here is more info:

4

Interesting. It looks like that “removing the white bars” is my problem. I am fine with a browser-safe area (and I was able to stretch the backgrounds and re-pad it using padding), I just wanted the background to match the rest of it. It turns out that inserting this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Solved my problem. It doesn’t account for the phone’s notch, but the layout already has enough padding that it is now rendering perfectly. I would have spent a lot more time trying to expand the margins without realizing the viewport was to blame, so I can’t thank you enough for pointing me in the right direction!

2 Likes