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

Comments

  • Abersade
    Abersade
    Posts: 421

    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.

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • robo40
    robo40
    Posts: 7

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

  • Abersade
    Abersade
    Posts: 421 edited June 2023

    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

     

    Post edited by Abersade on

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 421

    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.

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Keryth987
    Keryth987
    Posts: 1,047

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

Sign In or Register to comment.

April 2024
Season of Strife

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions