Hi, what size should a background image be in order to not have it stretch? Thanks!

robo40

eponymous

Abersade

If you mean the main background image that you would upload to the Settings > Style page, I'd recommend an image that is at least 1600px wide. I just checked a few of mine, the only one of them that isn't at least slightly stretched is 1920px wide.

robo40

Thanks, looks like I had old info. Any idea on the vertical proportion?  I'm OCD.  ;)

Abersade

Not off hand, really it depends on the monitor, which applies to the width as well. Bigger is better in this instance, keeping to a 16x9 ratio to minimize possible distortion. Using 1920px wide would mean you'd likely want the picture to be approximately 1080px tall. 2560px wide would need to be 1440px tall. Some laptops with sufficiently advanced screens are capable of displaying 3840px wide by 2160px tall.

That said, from my testing I'd aim for the 1920px x 1080px size. That will result in backgrounds that are crisp on most displays that aren't a mobile device.

Mobile devices are a whole different ball of wax, with cellphones in particular throwing a curveball in the required aspect ratio for the background. In fact, and I thought this was interesting since I did not know this prior to today, the average aspect ratio for the average cellphone display is the exact opposite of a traditional widescreen monitor, so 9x16 instead of 16x9. Neat. If you are developing your site specifically for use on mobile devices just swap the numbers I listed in the first paragraph and you should see good results.

If you are developing for a mixed audience, like many of us are, that leaves you with an issue then. Any background that is sufficiently wide for a PC/Laptop display will generally be the wrong height (much too short) for a cellphone which means that huge swaths of the picture get cut from the sides to make it fit the screen. The inverse of that is true if the picture is ratio'd correctly for mobile devices, the picture then isn't nearly wide enough for widescreen displays so the top and bottom get cut. The worse case scenarios are if you use a square image, where it looks wrong no matter what you do.

To fix the mixed audience issue, you have two options that I'm aware of. You can either choose one of the two formats and develop for that one while leaving the background to look a bit odd for the members of the other audience, OR you can become great friends with the @media CSS selector. @media, if you aren't already aware, allows you to specify size conditions for the display as part of the CSS selector, allowing you to do things like change the background to a different one if the screen is a certain width or whatnot. More info regarding @media can be found here: https://www.w3schools.com/cssref/css3_pr_mediaquery.php

 

Abersade

I suppose a third option would be to use a seemlessly tiling image as your background, then create CSS to make it tile at the scale you want it to. That would work regardless of the display but leaves you with far fewer options to choose from when picking out your background.

Keryth987

Image I'm using here is 1000x800 and doesnt look streteched to me