Archived topic
Background image in content is not shown
7 replies · Started by Peer on December 18, 2020
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?
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".
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.
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 ?
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?
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 :)
Hi Tom.
Cool. That works!
Thanks for sollving the problem !!
No problem! :)
