When completing the design work for my the website for my new band All With Time, I noticed the WordPress theme I had chosen to base my site design from (FoxHound’s Wonderful Dark n’ Gritty) had an interesting visual bug on iPads.
The iPad, being the “best way to browse the web” *sarcasm* decides it is smarter than your site’s design and resizes background images that are larger than 1024px to fit.
The result is that all of your site content is scaled to be viewed in the viewport, and the background is not:
Well, your old buddy Philoking loves you and wants to save you the time I spent searching for and understanding the solution!
There are two variations of logic here, and I went the cheaper route.
Webkit Background Size
Webkit has a handy CSS override that you can place right your existing tag, div and ID style declarations to tell the iPad not to resize your image. In FoxHound’s theme this is declared in grey.css (or blue.css, red.ss or green.css if you have changed the theme color setting) and it’s simple to override:
body {
background: #000 url(images/background.jpg) center top no-repeat;
-webkit-background-size: 2000px 1175px;
}
#wrapper {
background: #000000 url(images/background.jpg) center top no-repeat;
-webkit-background-size: 2000px 1175px;
}
I chose this fix because it was exceedingly simple to implement and was fast to test.
Alternate iPad CSS and Images
The second approach, and probably the right approach, is a bit more time consuming. It involves the following:
- Create alternate style sheets for different devices/orientations
- Create new artwork that is scaled and/or cropped to fid that devices
- Test Test Test…
The Result
That seemed like a bit more effort than I was willing to go for at the moment, so I chose option 1.
The result is obviously great. While we are on the topic of WordPress and themes, I’d like to add that outfits like FoxHound provide some really great themes at a great value. While our nature lends us to go for the freebie themes or even worse take premium themes without paying for them, I’d like to add my perspective.
I think I paid $70 for this theme when I bought it. I’ve now used it for two sites that both look completely unique simply by creating custom graphics. With a solid foundation to build your site from, you can create something compelling very quickly. I have about five hours of time in developing this entire site.
Hope this helps!
Tweet
That’s really cool looking site! Can you provide a link to where did you bought the theme? Thanks!