- This topic has 13 replies, 3 voices, and was last updated 3 years, 4 months ago by Leo.
September 11, 2019 at 6:41 pm #1007250Janani
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?September 11, 2019 at 6:46 pm #1007253LeoStaffCustomer Support
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 🙂September 11, 2019 at 10:24 pm #1007323Janani
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?September 12, 2019 at 6:16 am #1007607DavidStaffCustomer Support
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 paddingSeptember 13, 2019 at 7:45 pm #1009067Janani
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?September 13, 2019 at 7:52 pm #1009069LeoStaffCustomer 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 🙂September 14, 2019 at 1:58 am #1009165Janani
Thanks.let.me try this.can you please tell me how you found the section size?September 14, 2019 at 4:57 am #1009243DavidStaffCustomer 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.September 14, 2019 at 7:46 pm #1009663Janani
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?September 14, 2019 at 7:47 pm #1009665LeoStaffCustomer SupportSeptember 14, 2019 at 8:06 pm #1009673Janani
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.September 14, 2019 at 8:20 pm #1009674LeoStaffCustomer 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?October 3, 2019 at 7:11 pm #1025784Janani
Yes, thank you. This is resolved.October 4, 2019 at 9:00 am #1026292
- You must be logged in to reply to this topic.