Docs

[ggoudey]

I am trying to make the background color of a section with text transparent. It is just below the top background image set to parallax. I have some dummy test in place and will be adjust the colors of the text and bg color.

I would also like to give the navbar a degree of transparency.

I haven’t found much info on the proper way to set up the parallax effect but i’ve found that if i set the padding of the bg image (in this case, a barn) to 300 top&bottom, that the whole image is displayed.

What I’m trying to achieve is that the whole image is visible, but that a portion of the top is covered by a semi transparent navbar and the bottom by a transparent text field.

http://www.peacelocalfood.info/

[Christopher]

Hi there,

The background has 0.93 of transparency. It displays body background color over transparency. If you want to make sure that it works fine, please add a background image to body.

You can also add transparent background color to your column.

If you want to change background position, you have to disable parallax option.

Hope it helps.

[ggoudey]

I now understand the slider in the color picker for adjusting the ‘a’ value. But from your explanation I don’t understand how to make the bg color in the section transparent so the barn parallax image can be seen while the text can still be read?

[ggoudey]

OK. I think I am figuring it out.

[ggoudey]

OK, this is working out nice. Thanx for your help Christopher.

Is it possible that the navbar can have transparency?

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-navbar {
    background-color: rgba(0,0,0,0.5);
}
@media (min-width:979px){
 .home div#x-section-1 {
    margin-top: -75px !important;
}
}

Hope that helps.

[ggoudey]

Yes that does it. Thanx. But I can’t figure out why there is a gap between the post carousel and the navbar? Maybe the transparency showed what could not be seen otherwise?

[Rupok]

Hi there,

Looks like you have take off the “Navbar Top Heights” value. Let’s place 75px for this from Customize > Header.

Thanks!

[ggoudey]

I have done as suggested above. Look good now. Thank you.

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts