2

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?

Improve this question
1

4 Answers 4

Reset to default
2

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

Improve this answer
5
  • This is the exact answer I didn't want. :( Considering, I can't find any other answers that will suffice, I guess I will have to have a huge jquery script after all.
    – Joseph Casey
    Apr 11, 2014 at 21:13
  • Yeah, it is very annoying : S You don't really need JQuery, though. You can achieve this using CSS and media queries as long as you assign the image as the background of an element and not as the src attribute of an image. Take a look at the link at the end of my answer.
    – cockypup
    Apr 11, 2014 at 21:18
  • The script I am writing determines the background image off of what the content of the article says. I don't see how this can be avoided unless browsers start supporting the <picture> tag. :(
    – Joseph Casey
    Apr 11, 2014 at 22:00
  • Can you add server side logic (php, aspx, etc)? You could let the server optimize the size the image before serving it based on the device max width.
    – cockypup
    Apr 11, 2014 at 22:08
  • I normally do that with any clients when I develop for them using a VM to host their website. Sadly this is a CMS with limitation on the back-end since they'll need to know how to maintain content themselves. smh, I know.
    – Joseph Casey
    Apr 14, 2014 at 13:59
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/

Improve this answer
1

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.

Improve this answer
1

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/

Improve this answer
1
  • 1
    Hi awesome, could you please explain a bit more what we'll find behind the link you provide and why it answers the question? That way, your answer is still of value in case the link breaks at a later time. Link rot is the main reason we really dislike link-only answers here. Thanks for your effort and keep contributing!
    – Vincent
    Dec 18, 2014 at 17:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.