About semi transparency over a backgraound image

Hi,

I was viewing an other page than my own and saw an interesting feature / structure and I was wondering if that is possible to do on Sydney theme (The page looks like Sydney theme thoug). The page is http://www.villahiidenmaki.fi/fin/yopyminen/. The feature I’m interested in is that semi transparency white color over a background picture and on the top of that those tree colums with links.

How do I do that transparency part? I will ask more questions if I can’t figure out how to do the rest :slight_smile:

I thank you at advance!

mikko

Hi Mikko,

Can you share your site URL and let me know which section that you want to make it has background transparent.

Regards,
Awan

Hi Awan,

My page is www.riihonmajatalo.fi. I would like to try that transparency trick on my first page (Etusivu) for the services section. The other place I would like to try it, is all the other pages between the header image and the call to action section.

Is there a easy way to do that?

Kind regards,

mikko

Hi,

I found a part of solution to the problem. I’m using SiteOrigin CSS and it has some kind of a visual editor that also generates css code base on the changes I do with the editor.

Here is a part of the code:

#panel-2-0-0-0.so-panel.widget.widget_sydney_services_type_a.sydney_services_widget.panel-first-child.panel-last-child {
background-color: #ffffff;
opacity: 0.85;
padding: 15px;
}

Here is the corresponding page:

http://www.riihonmajatalo.fi/

How do I get the “white” color width same as the page?

Thanks,

mikko

Hi Mikko,

My apologize, I can’t understand your question. Please could you elaborate this “How do I get the “white color width same as the page?”

Because when I am checked your site, its already displayed full width http://prntscr.com/fl3roc

Regards,
Awan

Hi Awan

Looks like I found a part of a solution just before you wrote me the message and before I went to sleep. Yes, the color is stretched full page in the frontpage (Etusivu). I set the full width stretched from the page settings. I might have a cache problem. Some times I can’t get the white area stretch full page.

But then, how do I get of the three different columns on page (for exmaple) http://www.riihonmajatalo.fi/leirit/?

In the SiteOrigin CSS visual editor I just have a block:

.panel-grid.panel-has-style > .panel-row-style

insted of some thing like this:

.panel-widget-style.panel-widget-style-for-446-2-1-0

Here are the only pages I have the white as a one block

http://www.riihonmajatalo.fi/
http://www.riihonmajatalo.fi/majatalo/

At the moment there is something white left only on a couple of pages though tried on several pages, if you a wondering there is white blocks missing…

It’s so frustrating for not knowing :slight_smile:

Kind regards,

mikko

Hi

I solved the problem by doing the color and background settings with the page set up site. I used Layout builder widget -> Edit raw -> Set background image -> Set overlay color.

That was kind of easy way to do, but had to do all the changes by hands to all pages, instead of using css.

mikko