Best background dimensions for mobile? | Poal: Say what you want.

But then again, when it comes to vector graphics for instance it's irrelevant, you can stretch those to infinity they don't lose quality, because vectors. Now if it's a stretched background bitmap, the only real concerns are proportions and size/"weight". Proportions so it doesn't get distorted too much to begin with; a 4:3 image will look "fat" if stretched to fit a 16:9 screen, evidently. And size/weight of the image, so it doesn't take ages to load. A high resolution will look nice everywhere if given the good proportions... It's just that it's going to be longer to load, sometimes way longer, depending on how shitty your bandwidth is. But well, once loaded it's cached, (unless you disabled the cache of course), and then it's fetched from the cache instead of getting downloaded every single time the page is refreshed, so in the end it's "relatively" annoying to have a big ass image in background. Now of course if you always have a piss poor connection, a big ass image taking forever to load everyday is going to be a concern.

Now if you're using "pixel art" type of image, with anti aliasing disabled browser side via css (which isn't always possible btw, depends of the browser and version), you can very well use a tiny one and stretch it to a giant screen, it's not going to look blurry, it's not going to look like it's of too poor quality. it's just going to look like a giant clean mosaic, as pixel art does https://pic8.co/sh/CSqaqg.png But again, proportions are key

And then, you can go for a repeating pattern/image filling the background in css, instead of a stretched background image. In that case screen resolution is irrelevant

It's proportions/ratio that you should be looking for; 16:9 on average, or rather, "9:16" since you'll evidently want to hold it vertically But to answer your question https://gs.statcounter.com/screen-resolution-stats/mobile/united-states-of-america "414x896px" Hm. Weird ass ratio https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide "360x640px" well that's "360p" 16:9 (640/360=16/9=1.77777777778) But I wouldn't pick any of those personally, but that's just me https://pacoup.com/2011/06/12/list-of-true-169-resolutions/ ... But then again, when it comes to vector graphics for instance it's irrelevant, you can stretch those to infinity they don't lose quality, because vectors. Now if it's a stretched background bitmap, the only real concerns are proportions and size/"weight". Proportions so it doesn't get distorted too much to begin with; a 4:3 image will look "fat" if stretched to fit a 16:9 screen, evidently. And size/weight of the image, so it doesn't take ages to load. A high resolution will look nice everywhere if given the good proportions... It's just that it's going to be longer to load, sometimes way longer, depending on how shitty your bandwidth is. But well, once loaded it's cached, (unless you disabled the cache of course), and then it's fetched from the cache instead of getting downloaded every single time the page is refreshed, so in the end it's "relatively" annoying to have a big ass image in background. Now of course if you always have a piss poor connection, a big ass image taking forever to load everyday is going to be a concern. Now if you're using "pixel art" type of image, with anti aliasing disabled browser side via css (which isn't always possible btw, depends of the browser and version), you can very well use a tiny one and stretch it to a giant screen, it's not going to look blurry, it's not going to look like it's of too poor quality. it's just going to look like a giant clean mosaic, as pixel art does https://pic8.co/sh/CSqaqg.png But again, proportions are key And then, you can go for a repeating pattern/image filling the background in css, instead of a stretched background image. In that case screen resolution is irrelevant

link

[–] • 0 pt

Thanks for the help. Any idea what code I can use so that the site displays the mobile background when being viewed from a small screen? Basically looking to put nativity portion of the background front and center when on mobile, instead of off screen.

parent
link

[–] • 0 pt

(edited )

Use queries like AOU told you

> only screen and (max-width: 480px) { PUT_THE_BG_IMG_CODE_HERE }

This means, that the "PUT_THE_BG_IMG_CODE_HERE" will get triggered only for the screen version of the site (as opposed to print version) and at 480px screen width and below

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

https://stackoverflow.com/questions/9506069/media-queries-and-background-images

https://www.w3schools.com/cssref/css3_pr_background-size.asp you can do testing there with "try it" and see the different options, also left panel, middle

So that would give something like

> only screen and (max-width: 480px) { body{ background-image: url("myImage/image.jpg") 100%;} }

https://www.lifewire.com/stretch-background-image-3466979

https://stackoverflow.com/questions/17988792/responsive-repeatable-background-image-for-body-change-in-media-query-to-cover

parent
link