Tagged: , , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 9, 2016 at 2:24 am #722289
    haydaw

    Hello,

    I have noticed that background images in sections that change height dynamically have issues with the quality of the image changing. For example if a section is set to a height of 600px, however the image has a height of 610px, the image will look quite bad, however opening it in full-size in a new tab the image quality is fine. I’m aware this would happen normally because of pixelation, but it seems quite extreme, is Enfold using any kind of image-rendering that might affect this?

    The main issue with this is if there is any text involved in a background image, as soon as the image is not at the images maximum size, even if shown at a smaller size, the text is barely legible.

    • This topic was modified 7 years, 11 months ago by haydaw.
    December 12, 2016 at 4:21 am #722901
    Rikard

    Hey haydaw,

    I had a look at the URL you posted on iphone6/chrome but I can’t really see any loss in image quality compared to when viewing it on a laptop. Could you post a screenshot of the problem please?

    Best regards,
    Rikard

    December 14, 2016 at 8:38 am #724168
    haydaw

    You can see a comparison of desktop vs mobile here: https://imgur.com/a/dRuvW

    December 15, 2016 at 5:35 am #724730
    Rikard

    Hi,

    Thanks, I see what you mean now but that is not really image quality, it’s because the image is trying to cover the whole container. If you want greater control over how the background image acts on small screen sizes you could add a new Color Section and upload an image better adapted for small screen sizes. Give your sections ID’s and hide/show them for the correct sizes using CSS like this:

    @media only screen and (min-width: 768px) {
#section-desktop {
  display:block !important;
}
#section-phone {
  display:none !important;
}
}

@media only screen and (max-width: 767px) {
#section-desktop {
  display:none !important;
}
#section-phone {
  display:block !important;
}
}

    Best regards,
    Rikard

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