: Best image size for responsive css background image 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

@Nimeshi706

check out - viewportsizes.com/
also this tool helps me to "see" what different websites will look like at different viewport widths, very helpful:
bradfrost.com/demo/ish/

Vote Up Vote Down

@Courtney577

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 www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/

Vote Up Vote Down

@Hamaas979

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.

Vote Up Vote Down

@Alves566

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

Vote Up Vote Down