Background on some pages scaled up on ipad

Support
#1

Hi,

I’m having an issue with my site. I have a global background image set in my Theme Options CSS like this:

body {
background-image: url(‘http://www.tylerwislerhome.com/wordpress/new-site/wp-content/uploads/2018/07/chevron-seamless-bkgd-lg.png’);
background-size: cover;
background-attachment: fixed;
}

Some of the pages look fine on the iPad – Home, Tyler Say’s, Contact
These pages have weirdly scaled up backgrounds - Tyler’s Journey, Appearances & Features, Spaces.

Is there some reason these particular pages have the scaled up backgrounds?

Thanks!
Jen

#2

Hello Jen,

Thanks for posting in!

When we view your site in an iPad emulator, this is what we see:

The image were a little scaled up because with background image that is set to cover will have to automatically scales up to cover the whole body of the site. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

You use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off or scaled up.

Hope this helps.

#3

But I don’t understand why it would scale differently on different pages when the body CSS is for the whole site, not page by page. Any ideas on that?

#4

Hi Jen,

Please try this code instead.


body {
  background-image: url('http://www.tylerwislerhome.com/wordpress/new-site/wp-content/uploads/2018/07/chevron-seamless-bkgd-lg.png');
background-size: 100vmax 100vmax;
  background-attachment: fixed;
}

Hope that helps

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.