[Resolved] ideal background image size in sections

Home Forums Support ideal background image size in sections

This topic contains 13 replies, has 3 voices, and was last updated by  Leo 4 months, 3 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #1007250



    I am having a blue sky background image, which I want to use in my sections under the page header in the home page. Just 2-3 paragraphs of content. Ideally, what should this image size be that I upload? Not sure how much should I scale the image to? And after uploading, which settings should I choose?


    Leo Customer Support

    Hi there,

    Unfortunately there isn’t an answer to this question as it completely depends on the height of your content and the top/bottom padding you are using.

    Best thing to do is to set the section up with the desired content and padding first, then if you can link me to that page, I can tell you the exact dimension of that section for you to decide on the image size.

    Let me know πŸ™‚



    Thank you, I will do that.

    But generally, I always this doubt as to which size I should scale my image to for different purposes. For page hero, is it generally 1600*1000 or 1920*1200. If it is contained, it would be 1600*500. I read these in an article. Hope these are correct.

    But how do we know how much to scale images when we use them for different purposes? Do you have any way to measure this or a guide on this?


    David Customer Support

    Hi there,

    the ideal background size will be dependent on the container size – there are no hard and fast rules.

    If the section is contained then its width is known, you then need to decide on the height which be dictated by the Sections Content and the Padding you add.

    As Leo said if you want to set up some Content and define the top and padding for the space you would like around it, we can give you the sizes you should work to.

    But as noted before, they are CSS Background images, the image will always cover the container, this means some of the image may be hidden on smaller screens, keeping the aspect ratio will be the same as what you did with the Header Element, by using % top and bottom padding




    1. I have put in the content in the sections. Please let me know the size of the image that must be uploaded. I uploaded 1000 * 662 px image, with a blue sky to white gradient, but I find that after uploading, the background image is just plain blue with no gradient. Why is this? What should I do to make the full image with gradient appear as background?
    2. I have added 4 buttons – how do I change the shape of these buttons from plain rectangle to some other shape? Do I have to us HTML or is there a plugin available for this?
    3. Page header – the last bottom of the image still not appearing. Instead, the next section starts appearing at the bottom of the page header. How do I correct this and make the full image appear?


    Leo Customer Support

    1. So that current section is 1903*403px. The width (1903px) depends on the screensize. So basically right now only the top of the background image is showing.

    A background image around 2000 * 420px would work for this. If you want to add more top and bottom padding, then the height (420px) would need to be increase as well.

    2 & 3. Can you open 2 separate topics for the new questions?

    Thanks πŸ™‚



    Thanks.let.me try this.can you please tell me how you found the section size?


    David Customer Support

    Leo used the Browser Inspector – view your page, right click > inspect.
    This will show you the DOM file for the site, listing each of the elements. If you select the Section in the DOM list it will display the dimensions of the element on the screen.



    Thank you. I did the same thing. But I am unable to see DOM list. I can see something called DOM breakpoints, but not DOM list. How do I find this?


    Leo Customer Support


    Also, I tried the same thing you asked me to. I resized the image to 2000*620 and uploaded. But I dont see a change. And the colour seems to be different from the original image colour. The original image colour is a light sky blue to white gradient, but once uploaded, it just a dark blue plain colour.


    Leo Customer Support

    The code is still showing the original 1000 * 662 image is being added:

    Can you double check that the setting is saved successfully and all caching is cleared?



    Yes, thank you. This is resolved.


    Leo Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.