Background centers on a PC, but not on mobile

Question

I'm having trouble getting my website to display properly on mobile devices

Here's the code I used in my CSS, and this is what I want it to do on mobile devices too:

html {  
  background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
  background-attachment: scroll, scroll;
  background-color: #000;
  background-repeat: no-repeat, repeat-y;
  background-position: center top, center top;
}

html, body {
  width:100%;
  height:100%;
}

I have no idea what I've done wrong, I've tried a couple of fixes and I haven't been able to make it work. Can someone help? Links below.

enter image description here

My website - http://renoized.com

You may be having the same problem as the user in [this question](http://stackoverflow.com/questions/3183467/css-background-position-not-working-in-mobile-safari-iphone-ipad). Supposedly, the iOS browser doesn't support centering background-images of the `body` tag... this may be true of Android as well. The suggested workaround would be to use a wrapper and apply the image to that. I don't have to tools to test it right now. — Woodrow Barlow, Sep 02 '14 at 13:47
@WoodrowBarlow This is the one I tried, I included the background wrapper and it had no effect, sadly. And when adding "background-position-x: 50%;" it cuts off half of the image. — Renoized, Sep 02 '14 at 13:53

score 1 · Answer 1 · answered Sep 02 '14 at 13:54

1

You could try either:

Background size: cover;

or

Use an image instead of a background, using absolute positioning and a z-index value of -999. Since iOS doesn't support background images with 100% width.

answered Sep 02 '14 at 13:54

Dyspraxic Designer

71
3

Is it possible to have a repeating image with the second method? I've tried the first and sadly, no dice. It's changed the image, but it's too big on a desktop and too small on a mobile. That's confusing. – Renoized Sep 02 '14 at 14:00
You could use media queries to get a good fix. for example, use a media query to hide the background image, and unhide the image fix above, when the screen gets to tablet/mobile size. I hope that is clear. If it isn't let me know, and I'll make up a codepen :D – Dyspraxic Designer Sep 02 '14 at 14:44
I think the method you described is very similar to the fix I found below. If you think it would help people who find this question it might be worth explaining the code for future stack users. – Renoized Sep 02 '14 at 15:18

score 0 · Answer 2 · answered Sep 02 '14 at 15:16

The method I used to fix the problem is this, regardless of how elegant or inelegant it is, I'm just glad it works.

All I had to do was copy the css from here:

html {  
  background-image: url(/wp-content/themes/Newstyle/images/bg.jpg), url(/wp-content/themes/Newstyle/images/bg-repeat.jpg);
  background-attachment: scroll, scroll;
  background-color: #000;
  background-repeat: no-repeat, repeat-y;
  background-position: center top, center top;
}

to my content container tag, which in my case is #page.

What this does is give the content its own background in the correct place. It also fixed a problem I had on .desktops where the background would move if your device width is smaller than the content <div>

Background centers on a PC, but not on mobile

2 Answers2