Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 12, 2018 at 10:50 am #996428
    Freek

    Hi
    ,
    I have a question about image scaling.
    Added a 100% color section with an image background (5120×2880) with the following color section settings:
    – Fixed background attachment
    – Top left Image background position
    – Scale to fit background repeat.

    On a iMac 5K screen the image is not scaled to the full width but there is a small white gap on the right side of the screen. See attached screenshot. See URL in PC.

    What I want is that no matter what size a screen is, the background scales with the screen measurements.
    I also tried an image with larger size (5689×3200) but the gap is still there.

    What image size do I have to use to accomplish my goal?
    THX Freek

    August 12, 2018 at 9:05 pm #996491
    Mike

    Hey Freek,
    I tried to match your setup on my localhost and found that 6800×3200 seemed to work fine
    Please try the image in the Private Content area, if it is still a not right for your 5k screen then make the image wider but not any higher.

    Best regards,
    Mike

    August 13, 2018 at 9:11 am #996582
    Freek

    Hey Mike,

    Unfortunately it does not work. Now I get a white bar below the image. In fact the question is “What image size to use for a full screen image which show fullscreen on every screen (except mobile screens)”?
    THX Freek

    August 13, 2018 at 1:38 pm #996667
    Victoria

    Hi Freek,

    Are you using a Layer Slider now? Is it working better for you? Looks ok in Chrome on a Mac.

    Best regards,
    Victoria

    August 13, 2018 at 2:51 pm #996709
    Freek

    Hi,

    Yes I tried the layer slider approach and it works Ok for me.
    What remains is the question how I can fix it with color section. I tried the image size (6800×3200) Mike advised but then I get a white space below the image.
    THX Freek

    August 13, 2018 at 3:43 pm #996733
    Victoria

    Hi Freek,

    Do you have the page with the issue? I don’t see the color section that page and are you using Safari or Chrome?

    Best regards,
    Victoria

    August 13, 2018 at 4:13 pm #996745
    Freek

    Hi Victoria,

    Made a new page for background image 6800×3200) here
    As you can see there is a white space below the image. On safari, Chrome and Firefox

    And a testpage for background image (5120×2880) here
    As you can see there is a white space on the right side of the screen. On safari, Chrome and Firefox
    THX Freek

    August 13, 2018 at 5:41 pm #996787
    Victoria

    Hi Freek,

    Thank you for that.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width:2200px){
    .avia-section.main_color {
        background-size: cover !important;
    }
}

 /* or this */
@media only screen and (min-width:2200px){
    .avia-section.main_color .av-parallax  {
        background-size: cover !important;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    • This reply was modified 6 years, 3 months ago by Victoria.
    October 15, 2019 at 8:58 am #1147991
    yohopower

    I also have problems like this.
    When the resolution is 5120×2880 (27 inch iMac)
    The composing of the webpage is chaotic
    https://www.yohopower.com

    October 16, 2019 at 9:33 pm #1148680
    Basilis

    Hi,

    Do create a new post if the solution here does not work for you please so we can review further.

    Best regards,
    Basilis

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.