The default widths are 0-480px for mobile, 481-768 for tablet and 769-1232 for desktop in pixels.
If my design calls for a large banner image, how do I deal with this for each device?
For example, for desktop, my large banner image is 940 px wide. I can get my banner image to center for any size larger than 940, but for less than 940, the banner image is clipped.
Should I create the banner images for the smallest size of each device type? If I do that, then in the desktop view, my banner image will be only 769px wide centered on a possible largest browser width of 1232!
How should I handle this?
Set the width of the image at 100%. Then it will adjust to the device screen size.
Not so the 'whole' of the image can be viewed as the the device screen is narrowed.
You can create three different sized background images and center those by changing the css as the device viewport gets narrower.
Mobile adaptation is still fairly new and I guess its a bit give and take at the moment. It will change the way we think about constructing sites over the next few years. I expect to see a lot more sites atempting to address the mobile issue but the design will be compromised intially until the solutions become more advanced
Try adding to your background image css - background-size:100%;
It works in Firefox but at this stage I'm not sure what other browsers or devices support it.
It works in the following browsers:
The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.
But I think some mobiles devices will not support the property.
IE7 and 8 will ignore it but you don't really need to have an 'adaptable' solution for those two browsers.
A great place to check for browser support is the W3C schools site. Has lots of mini tutorials and examples on how to use idfferent properties. The background-size page is http://www.w3schools.com/cssref/css3_pr_background-size.asp and has notes for different browser support, properties, and other variables you can set.
I would make the different divs that contain the banner and control their visibility based on the @media queries or conversly you could utilize a different sized image altogether depending on the media queries.
Europe, Middle East and Africa