_Background Image Shrinking on iPad

Recently I was building a site that had full page backgrounds.  One of the pages had a long vertical background to accommodate the content.

Here is an example of what I am talking about:

body {
  background: #fff url(img/my-really-large.jpg) top center no-repeat;
}

Example (view on Desktop)

There really is not an issue (aside from image load) when viewing on Desktop browsers.  However, I would like this site to be compatible with the iPad as well.  Unfortunately this simple technique will not work on the iPad.

The iPad uses Mobile Safari which, by default, scales websites to fit it’s viewport.  It does this to text, images and background images.  It has to do with a resource limit put on the device from displaying large images.  The maximum number is 1024 x 1024 x 3 which is 3,145,728 (result varies a bit depending on iPhone or iPad).  However, Mobile Safari will scale your image accordingly to fit that size and your screen.

You will end up with something like this (view on iPad)

There is a simple fix and it has to do with some newer -webkit tags. Add the following to your body declaration in your CSS:

  -webkit-background-size: 1200px 1900px;

(where 1200 1900 is the size of your image)

This will only render on WebKit browsers and fix the issue of scaling.

See here (on iPad please)

This will force the iOS device to load the full background.

This tip will definitely be coming in handy again.

_Incase Product Support

I recently purchased an iPad 2 and started my search for a case.  Apple makes the new case which has ‘magnets’ and puts the iPad to sleep when it is covered and wakes it up when you open the case.  Sounds pretty cool but it does not protect the back of the iPad.  Placing the iPad down on a desk or a park bench will allow it to get scratched easily so I ruled that one out pretty quickly.  I then narrowed in on a ‘notebook’ looking case.  Something that felt nice, protected it in the front and back and functional.  I wanted to the the ‘original’ iPad case from Apple, but the iPad 2 is much thinner and it will not work.

I found the Incase Book Jacket at BestBuy.  It looked great, felt great and had all of these ‘slots’ for different positions of the iPad.  So I picked one up and used it right away.

My overall reaction is it is nice.  Looks and feel is top notch.  Functionality is not.  There are 3 slots within the case to allow different angles of use.  1 slot works all the time.

This postion works well.  It is great for watching Netflix or any videos on it.  You can type on it but this position is ideal for viewing and swiping.

This is the second slot.  This one works pretty well.  Not as much as the first one but it works.  You can type on here but be careful, at random times it slips out of the slot.  A little annoying.

The third slot seems to be ideal for typing.  Just a slight angle and type away.  The problem is I can never get the iPad to stay in the slot.  It keeps slipping out.  And if I do get it to stay as soon as I breath on it let alone type, it slips out.

There’s not a whole lot I can do about it now. I contacted Incase and they responded with the following:

Hello Josh,

Thank you for contacting Incase Designs Corp.

If you have a problem with your warranted Incase product you may file a claim to have it replaced by going to the following URL:

http://www.goincase.com/warranty-claim-form/

Sincerely,

Incase Designs Corp.

I can’t really warranty it since I do not have the receipt and really do not want to deal with the hassle.  So I am informing others about the case.  Reviews posted on GoIncase.com, Amazon and BestBuy will hopefully educate buyers along with informing Incase that they need to fix the issue at some point.

_iPad App Reviews – Fun

These 3 are in the category of fun since they are sort of random.

ABC Player

Kudos for ABC on this one.  Real nice app.  The iPad just makes images pop and when you have some great images, it makes the app look even better.  That is what this has.  Awesome large images and previews of ABC shows.  Ability to watch quite a bit of past episodes, check scheduling and keep a history of videos watched gives this app a lot of positives.

Epicurious

For the aspiring cook, this app is for you.  It feels like the Betty Crocker cookbook.  Tabs on the side, big images, ingredient list, reviews and more.  Solid functioning app.  The one thing lacking is video.

GAP 1969 Stream

I like this app not because of the GAP or products, but because of an entirely new way to navigate.  The app gives off the impression that it is endless.  Keep scrolling left, right or up or down you will never come to the end.  It repeats, but it works as well.

_iPad App Review – News

Today is the news category.

USA Today, Reuters, and Bloomberg

USA Today

USA Today takes a safe approach to their app.  It looks EXACTLY like their newspaper and functions like a web site.  At times you can get lost when navigating through articles.  The ads don’t function that well.  Orientation of the device does not provide that much enjoyment.  The app is ok.

Reuters

The Reuters app is a great news app.  Very clean.  It uses icons that we are familiar with (the dot notation for swipes).  Image gallery, pop up video and ease of getting back to all of the main articles.  They make use of orientation by moving the article to the right and giving you options to jump to other sections or directly into an article.  Interactive stock tickers give this app a little more life.  Overall, solid.

Bloomberg

Bloomberg took a different approach to colors, instead of white or light background they went black.  Not a fan.  Very little images if any, navigation is clunky, drop-downs seems like a band-aid to get to where you want to go.  Hopefully next release will be improved.

_iPad App Review – Books

Like the previous reviews, the topic today is Books.  I will be looking at Alice in Wonderland, Disney Digital Books and Marvel Comics.

Alice in Wonderland

Here is another app that got a lot of hype.  You can read a story and move objects around.  Is that really ground breaking?  It is basically a picture book with areas that you can either swipe/drag or rotate and they move.  I think pop up books and scratch and sniff are more interactive then this.  From a layout and design perspective it is pretty cool.  Reading to your kids the book also is nice since they can interact with some objects.

Disney Digital Books

Every once in a while someone hits it out of the park.  Disney did just that.  The Toy Story version of the digital book is pure awesome.  Simple animation makes the book come alive.  Read along with highlighting the words helps the little ones read.  Ability to record my own voice so my kids can hear me read the book to them is awesome.  Add some games, have some of the pages ‘color-able’ and you got a great app!

Marvel Comics

I will say this first, I am a biased Marvel Comic fan.  With that said, this app is awesome.  The store is a simple lift from the Appstore (looks identical) but that is not the point you should care about.  Nor the ability to download a ton of old and new comics.  The point you need to pay attention to is once you start reading or I should say ‘living’ the comic.  The comic view provides a traditional read of the full page but you can also dive into each of the letter boxes and read the comic that way.  You eye is no longer jumping to the action box half way down the page but your involved in the intense story of the box.  Swipe and it animates to the next box.  Nice job.