-
Posts
-
Hi,
I’ve created a color section with a background image that covers 100% of the viewport. The issue I’m having is that when the page loads for the first time the image loads with some white space between the top of the page and the image itself. Once the image loads it pops into place but until it does it looks pretty ugly. Is there any way to fix this?
I’ve included two screenshots of the page before loading and after loading.
Before
After
Hey snxodesk,
Could you post a link to the site in question so that we can take a closer look please?
Best regards,
RikardHi snxodesk,
There are errors in JavaScript in thumb-gallery.js and so the page breaks. Please check the script.
Best regards,
VictoriaHi Victoria,
Thanks for the reply. I’ve fixed all of the console errors and warnings that appeared but the issue still persists. Is there anything else I can try?
Hi,
Can you try to disable all your plugins and check if the issue still persists, if it doesn’t enable the plugins one by one to know what’s causing the issue, if doesn’t help, please give us temporary admin access, so we can check further.
Best regards,
NikkoHi,
Thanks for giving us an admin access, I have changed the Background Image Position of the Color Section’s Background from Bottom Right to Top Center and it works fine. Let us know if you need further assistance :)
Best regards,
NikkoHi Nikko,
Thank you for taking a look. I should have posted in the initial description that I know changing the position fixes the issue. The problem is that I want the photo to be in that position. Is there no way of resolving the issue without changing the Color Section’s Background Position? I guess the other option would be to crop the picture in a different way.
If I do have to crop the picture to achieve the same effect what pixel width and height would you recommend for a full screen color section background image?
Thank you,
AndreiHi Victoria,
Thanks for your answer. I took a look, this looks to be a chrome issue specifically. I prevented my browser from downloading the shortcode.js file and this looks to be a chrome specific issue. Before the page is fully rendered and while the javascript files are still being downloaded the image gets rendered based on the styling which sets the color section container height to 1500px. Since the image isn’t long enough to cover that it causes the “image jump” I mentioned earlier. I’ll see what I can do to fix it.
With this color section I’m trying to cover all display sizes between 1920px width and 1025px width.
- You must be logged in to reply to this topic.