Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 25, 2021 at 10:21 pm #1296637
    AFEC

    When using the color section to create a full-width background image, I encounter the issue of that image appearing different across different monitor resolutions.

    Example of issue:
    I created a background image at 1920x1080p for the color section and:
    on 1080p screens it looks as it should
    on 720p screens it zooms in, cropping essential points of the image
    on 4k screens it only fills part of the width

    Questions:
    What file size should I set my raw background image to?
    How do I make this background image appear identically across all desktop resolutions? (720p, 1080p, 4k, etc.)

    Thanks,
    Ryan

    April 28, 2021 at 5:56 am #1297102
    Rikard

    Hi Ryan,

    It’s very difficult to get background images to look exactly the same on all screen resolutions unfortunately. If you need greater control, then you might consider duplicating the section, and use an image which is better adapted to mobile screens in the new section. You can hide/show the correct section in the Advanced tab, in the element options. If you need further help with this, then please post a link to where we can see the results you are getting on your actual site.

    Best regards,
    Rikard

    May 5, 2021 at 4:39 pm #1298641
    AFEC

    Thanks Rikard – I figured it was difficult. The mobile solution that you suggest I have already implemented. This is regarding desktop resolutions (780p – 4k in resolution). As a workaround in the past, I have created large image margins in a higher resolution, so when it zooms in on smaller screens, the focal point of the image still displays.

    I am wondering if there is a way to automatically snap the vertical left and vertical right points of an image regardless of the desktop resolution, so that background appears identical across.

    i.e.:

    I upload a 1920x1080p image background to my color section

    On 4k displays, it stretches proportionately to fit (rather than displaying vertical margins)
    On 720p displays, the image scales down to fit (rather than cropping the space of the image outside of the 1280x720p monitor)

    Thanks!
    Ryan

    May 8, 2021 at 9:19 am #1299090
    Rikard

    Hi Ryan,

    Thanks for the update. It might be possible to do what you are asking for, but I’m not aware of any such solutions unfortunately. Having duplicate sections for different screen resolutions is likely still your best option, unless you would like to try and create your own solution.

    Best regards,
    Rikard

    May 11, 2021 at 9:32 pm #1299758
    AFEC

    Thanks for the info, I will play around with different screen resolution settings. You can close this.

    May 12, 2021 at 4:37 am #1299792
    Nikko

    Hi AFEC,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘scaling color section images uniformly across different desktop resolutions’ is closed to new replies.