Background Images Not Working – Coming Soon

Hi @sdagency

I hope you are doing well.

I tested the feature on my lab site and it worked well https://monosnap.com/file/OKt1MaRltrUb6vgkBr8F5ut0GURCs5

Do you have any caching on your website, hosting or Cloudflare caching?

If so, please try flushing all caches.

In case you don’t. is it possible to share the site URL and we can verify the source code?

Best Regards
Patrick Freitas

Yes, we use caching, but I’ve cleared several times, tried new browsers, incognito, etc.

https://wcpro.corvettecollection.com/

Thanks.

• This reply was modified 1 year, 1 month ago by sagency.

So apparently in Website mode the Colors > Logo & Background color is overriding the background image specified in the CSS. If I open Inspector and toggle off the color showing there (which matches what I set in the admin) then I see the background image I uploaded. I tried setting this color to transparent, but then that just shows a blank gray background.

This has got to be a glitch right? Thanks.

PS: Resetting sections to defaults did not fix it.

Only hack so far is to add this to CSS…
body{background-image: url(“/wp-content/uploads/2023/08/404-Background.jpg”) !important;}

• This reply was modified 1 year, 1 month ago by sagency.
• This reply was modified 1 year, 1 month ago by sagency.

Hi @sdagency,

Hope this message finds you well, and thanks for the update.

Like Patrick I was not able to replicate the issue on my test, still, I did take a look at your site and I can confirm the theme is overwritten Branda Content >> Logo & Background setting for the background:

https://prnt.sc/iZkfYulTxcCv

The CSS is:

html, .branda-background-mask {
    height: 100vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    background-image: url(/wp-content/uploads/2023/08/404-Background.jpg);
    background-repeat: no-repeat;
}

You can use that code and add the !important property to each element and see if that helps or add the code at Appearance >> Customize >> Additional CSS, note that Branda does not use the body tag it uses html instead.

Please let us know the results and which theme you are using so we can try to replicate the same on our end.

Kind regards,
Laura

Thanks. Glad I’m not crazy and it’s actually a conflict somewhere. We are using Divi WooCommerce Pro.

Hi @sdagency,

Thanks for the information, it is possible for you to share the theme using a Drive service like Google Drive, OneDrive, or similar? I am afraid the theme does not have a free version so we will not be able to test and reproduce the issue on our ends. Still, if you don’t feel comfortable sharing the theme, this CSS might help to fix it:

html, .branda-background-mask {
    height: 100vh !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
    background-position-x: center !important;
    background-position-y: center !important;
    background-image: url(/wp-content/uploads/2023/08/404-Background.jpg) !important;
    background-repeat: no-repeat !important;
}

Please let us know.

Best regards,
Laura

Hi @sdagency

I hope you are doing well.

Allow me to jump back here,

Based on “Divi WooCommerce Pro.” seems you are using Divi theme correct? Can you switch to default WordPress theme and see if makes any difference?

I could find we do have a reported bug for CSS not being applied when using Divi theme.

Let us know the result you got.
Best Regards
Patrick Freitas

Hi @sdagency

We haven’t heard from you in a while, I’ll go and mark this thread as resolved. If you have any additional questions or require further help, please let us know!

Kind Regards,
Kris