Best image size for responsive css background image

Question

I am looking for a particular px size (WxH) image that would be the best dimensions to use if you wanted to call a single image that could be called as the background image for a mobile device using either portrait or landscape.

Anyone have any thoughts on the best way to display a background image under these circumstances?

Answer 1

If you want to use a single image for all mobile devices and displayed at its max resolution, then you will have to use a huge image to accommodate the largest device in the market. I believe it is the iPad with the retina displays which has 2048 x 1536 pixels.

Having said that, I don't think this is a very good approach

• Hard to maintain: The "biggest screen in the market" dimensions can change overnight by the launch of new devices, so your goal of having the one image that fits all will have to be accompanied by constant research trying to find out if a new device has been launched that has a bigger screen than what you accounted for. The very fact that you are asking this question here suggest how difficult it is to find out which is the biggest screen in the market.
• Unnecessary downloads: You will be forcing the visitors with small screens to download a huge image, wasting their download quota unnecessarily and risking that their browsers might not display a very nice version of your image when they shrink it.

I think a better approach is to use media queries and supply different images based on the maximum width of the device (or the maximum with of the browser, here opinions differ). Basically, you would supply a smaller image for smaller devices, a larger one for medium devices and a huge one for awesome screens. You can set this stops wherever you want.

I answered a similar question here: Common ground for image sizes when using Photoshop save to web

Answer 2

I'm putting forth a guess here on the intent of the original question. I believe that the question relates to two objectives:

1) size requirements for full display on various view ports 2) acceptable sizes (minimal) that would facilitate having smaller file size

I found a good article at Smashing Magazine which may also be of interest to answer this question. It specifically addresses responsive websites http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/

Answer 3

you dont need to do a huge jquery, you can do it easy in css, here il show you how to do it but you will have to think how this applies to your css as i dont know what your class id are called.

in the css file

body {
background: #FFFFFF url(images/largebackground.jpg);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (min-width: 400px) and (max-width: 1024px) {
.body {
    background: #FFFFFF url(images/mediumbackground.jpg);
}
}


@media screen and (max-width: 399px) {
.body {
    background: #FFFFFF url(images/smallbackground.jpg);
}
}

thats it, you can also check for orientation as well the exact same way.

Answer 4

check out - http://viewportsizes.com/

also this tool helps me to "see" what different websites will look like at different viewport widths, very helpful:

http://bradfrost.com/demo/ish/