The full page stretched background

Sunday January 23rd, 2011

I've been experimenting with a webpage design that requires a background image to show in its full glory on the page. Today this is not as easy as one would like. I've previously written about this in my article Stretched background image in your Myspace profile (March 2009) and the observations there are still valid.

To remind myself of the state of methods to accomplish this, I link to the following pages:

• CSS trick's - Perfect Full Page Background Image (November 2010)
• A List Apart's - Supersize that background please (July 2010).
• Resizable full-browser background image with jQuery - preserving aspect ratio (October 2009)

Todays' Problems:

1. While the CSS3 background-size: cover method definitely is the right method in the near future it does have a tendency in some browsers (e.g. Chrome 8.0.552.237 or 9.0.597.84 - see Bug Issue 69927) to cause lag while scrolling. It simply slows down your scrolling. Quite annoying.
2. The Safari browser in iPad seems not to support the background-size: cover in the same manner as the rest of the browsers.

Example Pages:

• A set of great examples (using different methods) at Noupe in the Scalable Full Body Backgrounds in Web Design (May 2010)
• Ben Paddocks website. A nice feature is that you can change background (next/prev).

Updated (February 26th, 2011):

• Scott Robbin's jQuery backstretch (July, 2010)