Footer – Background image publishing problem

Hello there.

Can anyone assist please?

Thank you.

Hey @jpm2f – I’m sure someone can take a look. Are you able to share a link to the page/site in question?

If you can also share screenshots of the way the template and footer are set up in the Editor – that would also be super helpful.

Hello @jordesign … Thank you for your reply.

The “correct” footer image in the editor test view looks like this … https://3.75.63.24/ … however on the domain no image show at all and it is entirely white, as per the background.

I have therefore had to temporarily adding a straight background which looks like this … https://5wf.org/

This issue also occurs when using a background image in the header.

Any advice would be appreciated.

Hi @jpm2f – I’m afraid I’m still a little unclear on the relationship between the preview site and the main site – are they synced somehow?

At the moment on https://3.75.63.24/ I’m not seeing any image in place – just a navy blue background – is that correct?

Hi @jordesign … to clarify

… the image needed is a wave effect …

Here https://3.75.63.24/ is what I see when I make the change to the footer, update, and view the page in preview … however …

Here https://5wf.org/, is what that same page looks like on the actual domain – the wave image does not show up.

The current solid colour on the domain page is because if I add no background colour in the footer, the image is simply missing on the domain, meaning the site is not releasable and therefore I cannot leave it like that for you to see the “white” missing image. That you will have to imagine I’m afraid. Sorry.

I have experimented – trying different images, different format images, and images in the header – all with the same result = any image placed in either the header or the footer will show in the preview once updated, but will not show on the actual domain.

I have tried with-image-with-background and with-image-without-background.

The result is that without a background, the image does not show in the header or the footer and therefore a background colour is necessary.

I hope this helps clarify.

Hi @jpm2f – that’s perfect. Thanks for explaining.

With the image in place – I can see what is happening. It looks as though when the site loads through https://5wf.org/ the background image is still referencing the URL at https://3.75.63.24/wp-content/uploads/2024/07/footer-background.png

Most browsers will block that, as it isn’t from the root domain the site is loading from. You can see the specific error from the browser in this screenshot.

So essentially it is happening because the background image is being uploaded and used from the https://3.75.63.24/ | test site.

Thanks for explaining @jordesign … am I correct in thinking this is largely to do with our AWS LightSail hosting? (… as https://3.75.63.24/ is the URL in LightSail)

Could you suggest a solution to overcome/solve this problem please? (especially as it seems to be both a header and footer image issue)

Thank you.

Hi @jpm2f – to be honest it could be to do with the hosting – and however the relationship between the staging site and the live site are set up. If it’s just 2 different URLs/domains but the same site – you may be able to resolve it by uploading and inserting the background image from the proper domain instead of the IP address.

Hi @jordesign – problem solved.

The solution – signing into the domain URL WordPress site, not the AWS Lightsail location, after using Bitnami to edit the site domain and WordPress URLs away from the default IP location to the domain URL.

Images loaded from there work perfectly. Thank you for your guidance.