[KelseyNParticipant]

Hello!
Let me start off with the fact that I am completely new to this. I loved building my site, but am completely new to customizing CSS. All I know is where to insert code into ONE place: Appearance -> Customize -> Custom -> CSS.
I am not familiar with how to form CSS codes, where to find them, nothing.
I’ve been scrolling through multiple forums on here trying to figure out exactly how to have a semi translucent background for the white text box so you can see my background image but still be able to read the text writing clearly. All I have been finding is solutions for backgrounds for colour not transparency, and frankly was left with more questions than answers.

my url: http://www.bcssecretreptiles.com
Version: 4.3.4
Using demon Ethos stack.

Thank you for any help, all my searches have resulted in more questions than answers so time to turn to the forum..

[KelseyNParticipant]

(just updated to 4.4.1)

[John EzraMember]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-container.main:before {
    background-color: rgba(255,255,255,0.8);
}

Since you mentioned you are new to CSS, I’ll try to break down the above snippet.

.x-container.main:before is called the selector, it allows you to target which element to affect.

background-color: is the CSS rule and

rgba(255,255,255,0.8); is the value.

rgba = red, green, blue, alpha values.

0 – 255 is the scale of darkness to light in a color.

rgb with a value of rgb(255, 0, 0) will equal red, rgb(0, 255, 0) will equal green and rgb(0, 0, 255) will equal blue. You can mix numbers in between to get different shades between these primary colors. Having rgb(0, 0 ,0) will be black and rgb(255, 255, 255) will be white.

If you add the 4th number for the “a” or alpha, this will control the transparency from 0 to 1.

0 = 100% transparent
1 = 100% opaque

rgba(255,255,255,0.8) will equal a white background that is 80% opague or 20% transparent.

I know this is just brief explanation, but I hope it helps you understand a bit better. There are lots of information online regarding CSS there are even free courses you can take to help you understand better.

We encourage that you do learn as it will be good invested time, especially if you plan to continue working with websites.

Hope this helps – thanks!

[KelseyNParticipant]

Thank you very much, answered my question perfectly and explained CSS all in one! I hope others will frind this as beneficial as I did. Thank you!

[John EzraMember]

You’re most welcome! 🙂

[Author]

Posts