BUG - Background images don't load

I’m not 100% sure this is a bug, but it is a very unpleasant experience.

I’m building a little SaaS where ppl can create one-page property listings. The background of the site is the property’s main picture.

Sometimes this picture loads and sometimes nothing shows up. After manually refreshing the page it does show up, but of course, this is bad UX.

Does anyone know how this could be fixed? I already tried a workflow to refresh the page when you’re on it for the first time, but this is just a loop so the page keeps refreshing.

  • Any other workaround?

Also, according to fast.com, my Mbps is 38. So nothing wrong with the WiFi over here.

Thanks in advance! :slight_smile:


Not a known bug, Depends on your workflow. Looks like its tied to load sections (Since it comes after refresh) try to use states

States is not an option here I believe, as Real Estate agents will create their own websites for their clients. So it should have its own page.

Is there any other possible solution to this problem?

Put up a screenshot of your element which sets the background image. Are they large images?

@pork1977gm @melon The image is just a background image. So instead of background: Flat color #xxxxxx. It is now an image.

The average image looks like this one:

Here is how it usually looks:

Here is how it should look:

Again, when you refresh the page, everything is working perfectly fine. Only on the first load the image is not displayed.

Provide workflow details…(From uploading to display events)

@melon okay, I will add a detailed answer with lots of screenshots, thanks already for your help btw! :slight_smile:

@melon @pork1977gm Alright so here is how it goes.

When creating a new listing, the user is asked to upload the ‘MAIN PICTURE’:

That main picture, including all other details, is stored in the database and the user will then be redirected back to the dashboard. (After everything is filled out and button ‘submit’ is clicked:

On the dashboard the user can see its new listing and choose to view it:

Then they go to the page of that cell, which they just created, as you can see, the background is set to a dynamic image (Which is the MAIN image that they uploaded in the first screenshot):

And now the problem that I’m having is that 8/10 times that 'dynamic background image from the database’ does not show up on the FIRST load, everything else works perfectly fine. After refreshing the page, the image does show up.

Now I’m wondering why the image does not show up right away?

Thanks in advance!

Here is a great video that explains the problem perfectly:

In other, words this problem would be fixed if the page refreshed itself after the first load.

Just out of curiosity, does it work consistently if :processed with Imgix is removed?


@shot Unfortunately this does not solve the problem. I just tried it and the same problem occurs. :confused:

In an effort to isolate the issue and find a workaround, I wonder if using a group element would work - i.e. using a large group, instead of the page element, for the background.

yes I tried something like that out with a floating group, but then it is not 100% responsive on all screens, and on some, bigger screens, when you scroll down, you will see a white block (which is the background’s color)

I just heard about a certain plugin that rescales your images to screensize. Going to try that out and hopefully that works. :slight_smile:

Try to dd the “'s Url” after the “image” when you display an image as a background.

What does this mean?

Thanks for your input, sadly it still happens.