Fixed background image and transparent content area

hohcatholic · Member · Apr 20, 2016 at 2:37 pm
Copy link

Add topic to favorites
Greetings,

I’m wondering if I can set a background image that is stationary as viewers scroll down the page and a content area that is semi-transparent that moves over the stationary background image?

Thank you in advance.

-Nick
hohcatholic · Member · Apr 20, 2016 at 2:38 pm
Copy link
stbenedictavon.net is the url
thesacredpath · Member · Apr 20, 2016 at 11:54 pm
Copy link
Hi, the first rule below will make the content area transparent. The first three numbers between the parentheses are the RGB color code for white, and the last, 0.8, is the opacity. The closer to 1, the more opaque and the closer to 0, the more transparent. The second rule sets the background color for a couple of other elements to transparent so they don’t block the background image.
```
.container {
    background-color: rgba(255, 255, 255, 0.8);
}
.primary-content .primary-wrapper .item a.thumbnail, .primary-content .primary-wrapper {
    background-color: rgba(0, 0, 0, 0);
}
```
On the background, you can set a background image of your choice at Customize > Colors & Backgrounds. Once you choose it and click “Select” to set it, click Options and you can set it to “fixed” and also choose whether you wish the image to repeat horizontally, vertically, or both if needed. You can also set an underlying color. I typically do this and choose an underlying color that compliments the design and the image just in case something happens and the image doesn’t load.
hohcatholic · Member · Apr 22, 2016 at 1:33 am
Copy link
This works well. Thank you much!
thesacredpath · Member · Apr 22, 2016 at 4:26 am
Copy link
You are welcome.

No items found.