- This topic has 7 replies, 4 voices, and was last updated 3 years, 4 months ago by Tom.
-
AuthorPosts
-
December 18, 2020 at 12:54 am #1585404Peer
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?
December 18, 2020 at 2:08 am #1585480ElvinStaffCustomer SupportHi,
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”.
December 18, 2020 at 3:20 am #1585579PeerDear 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.
December 18, 2020 at 5:24 am #1585738DavidStaffCustomer SupportHi 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 ?
December 18, 2020 at 8:12 am #1586113PeerHi 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.comThe 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?
December 18, 2020 at 1:10 pm #1586455TomLead DeveloperLead DeveloperUntil 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 ๐
December 18, 2020 at 3:58 pm #1586547PeerHi Tom.
Cool. That works!
Thanks for sollving the problem !!December 19, 2020 at 12:25 pm #1587422TomLead DeveloperLead DeveloperNo problem! ๐
-
AuthorPosts
- You must be logged in to reply to this topic.