[Resolved] Background image in content is not shown

[Peer]

Hi.

I’m helping a friend to creat a simple website.

Layout idea is to have an image as background of the content. So I included the image via customizing > background images > body.

When I’m in the customizing view, the image is shown the way I was thinking of, but as soon as I go to the live page (same and different browser / cleared caches …), the background imaga is not visible.

The problem seems to be, that the background color (customizing > colors > body) always “overwrites” the image to be shown and I don’t see the possibility to set the background color of the body as transparent, as it is possible for e.g. content.

How do I solve this challenge?

[Elvin]

Hi,

You can tackle this issue by using custom CSS.

Say for example, you want to use a background color with alpha values (transparent), you can do something like this:

body{
background-color: rgba(22,240,210,0.5);
}

More about rgba() usage here: https://www.w3schools.com/cssref/func_rgba.asp

This way, the background image is still visible even when there’s a background-color on top of it because the background color is “see-through”.

[Peer]

Dear Elvin.

Thank you for your swift support.

I included

body{
background-color: rgba(192,192,192,0.2);
}

to additional CSS

But it still doesn’t work.

If I set another color in the css, the other color is well visible. Only the transparency does not show. You can have a look here: http://bestusasommelier.com/ .

Thank you for your kind support.

[David]

Hi there,

this looks like an SSL issue. Your site is at HTTP – whereas the image request is being made over HTTPS – so the secure request for the image gets rejected.

Have you set up an SSL certificate on your site ?

[Peer]

Hi David.

Thank you for your comment.

We don’t have SSL (yet).
The site is hosted on a managed WP installation at Godaddy US.
Therefore all plugins, themes etc are shown in the source through their secure server https://secureservercdn.net/166.62.108.229/c4q.4d1.myftpupload.com

The image for the background is here http://bestusasommelier.com/wp-content/uploads/2020/12/Best-USA-Sommelier-Association-Logo-scaled.jpg but also reachabel through https://secureservercdn.net/166.62.108.229/c4q.4d1.myftpupload.com/wp-content/uploads/2020/12/Best-USA-Sommelier-Association-Logo-scaled.jpg

Is it possible to either embed the picture this way or the make a non-secure request for the image?

[Tom]

Until you have SSL set up, go to Customize > General and set the Dynamic CSS Print Method to Inline Embedding.

That should fix the issue.

Let us know 🙂

[Peer]

Hi Tom.

Cool. That works!
Thanks for sollving the problem !!

[Tom]

No problem! 🙂

[Author]

Posts