Sorry for the new thread, but the old one wasn’t letting me respond:
This problem just went from simple to complex. On the documents, photos and contact pages, I have a two-fold problem. One is that when I set the background width with @media (min-width: 550px) they ignore any custom requests for background size. In essence, they do not acknowledge the fact that I’m viewing those pages on a mobile phone.
When I remove the @media (min-width: 550px) restriction, I can get those pages to stretch correctly on a mobile phone by lowering the percentage on the height. However, each page stretches vertically differently. i used the following code for the documents page:
body.custom-background{
background-size: 100% 15%!important;
}
}
The documents page appears on a mobile phone perfectly. However, 15% wasn’t correct for the other two pages. If you look at these 3 pages on a mobile phone, you’ll see exactly what I’m describing here. And on top of that because this is not restricted exclusively to mobile devices, it may look perfect on a mobile phone, but it won’t look right in a desktop setting.
What’s odd is that when I request to stretch these pages 100% for both width and height, the width works fine and understands only to stretch to the sides of the phone. How is is that it recognizes that the width is less than 550px, but won’t acknowledge code with @media (min-width: 550px) ? I think there must be a simple solution here that I’m missing. Thanks for all the help. Here’s the link to the pages, which will appear to have the background only take up 15% of the height of the screen on the desktop: