[Support request] ideal background image size in sections

Home Forums Support ideal background image size in sections

This topic contains 11 replies, has 3 voices, and was last updated by  Leo 2 days, 16 hours ago.

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

    Janani

    Hi

    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?

    #1007253

    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 πŸ™‚

    #1007323

    Janani

    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?

    #1007607

    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

    #1009067

    Janani

    Hi

    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?

    #1009069

    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 πŸ™‚

    #1009165

    Janani

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

    #1009243

    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.

    #1009663

    Janani

    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?

    #1009665

    Leo Customer Support
    #1009673

    Janani

    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.

    #1009674

    Leo Customer Support

    The code is still showing the original 1000 * 662 image is being added:
    https://www.screencast.com/t/MHOymmUy

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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.