How to make my pages default background semi transparent

Instead of using opacity: 0.5; try using background-color: rgba(255,255,255,0.8) !important; obviously you can change your RGB values to the color you like

RGBA is the way to go for sure.

You might also want to target .inside-article instead of .entry-content.

Thanks got it.

What about Header?

I set my logo under header background.

My Header logo is .png. I just want to Transparent the white potion, but not the logo, thus i can see the body background.

The below code doesn't work, it get my logo transparent too and i can't see my body background.
t

.inside-header {
background-color: rgba(255,255,255,0.8) !important;
}

Im not too sure Kenneth but i think your header image has to have transparency in the first place inorder to achieve what you want.

Yea, there will have to be no color set for the header in "Customize > Colors > Header Colors".

Then try to apply it to the .site-header element.

Thanks, Got it!

1 more Question.

Under pages> Page Header
there are 4 tabs, <Image Settings> <Video Settings> <Content Settings> <Advance Settings>

With Page Header Position > Inside Content Area
<Image Settings>
I added a Image and resulting a max-width of 940px overlapping the inside.acticle padding

however
In <Content Settings>
I try adding the SAME image, my result is width 860px and having the inside.acticle padding.

how can I add the image in <Content Settings> with the max width of 940px, overlap the padding?

Is the "add padding" option enabled in the content settings perhaps?

Hi Tom,

how to make this for the other objects (Footer, Footer Widgets, Sidebar, Navigation etc.)? I don't know the excat syntax of the elements.

Thanks
Matthias

Hi there,

Here are the syntax you are looking for:

.site-info
.footer-widgets
.sidebar .widget 
.main-navigation

Thanks Bishop!

One more thing. If I only wants to make the background of the sidebar semi transperent it doesn't work. If I use ".sidebar.widget" or ".sidebar-widget" or ".sidebar .widget" nothing happens? Maybe the wrong syntax? I have also tried ".sidebar-widgets" and so on, but nothing worked.
".footer-widgets" works perfectly.

Any ideas?

If you want to apply it to the entire sidebar and not just the widgets, you would use .sidebar.

Thanks Tom and what to use if I want to apply it to the siedebar widgets?

Should be .sidebar .widget