page background transparency

Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

Thank you. Yes I am using a child. Do you have any advice about the transparency?

Hi timelessbeing,

For Twenty Eleven theme, this code should work:

#page {
background:rgba(255,255,255,0.5); /* the values are RED GREEN BLUE ALPHA, where alpha is the transparency control, 1 = 100%, 0.5 = 50% */
}

You can put that into the bottom of your main theme’s CSS or child-theme’s CSS; or if you have WordPress’s offifical Jetpack plugin installed, go to Appearance –> Edit CSS.

For RGB color values, you can use sites like colorpicker.com to find their value.

Hope this helps,
Nhat

@nhat: will you please stop encouraging people to add or edit their main theme’s stylesheet. They need to use ca child theme or a custom CSS plugin.

Hi Nhat. That did nothing.

Where did you put your code?

I just tried to reapply that on my testing site again; it works.
Here’s a screenshot of Twenty Eleven without that code: [link]
Here’s Twenty Eleven after applying that code: [link]

Notice the 50% transparency in the 2nd image.

I installed the “Simple Custom CSS” plugin, and just copy pasted your code right into it.

Yes I want mine to look just like yours

I tried it again using Jetpack, and this time it worked. It only affects the body of your page though. Now I just need to figure out how to do it for the header.

Header and body backgrounds overlap. That means that even if you set the header bg to fully transparent, the body bg still shows through. I really want my header to have no background.

Aha. I’ve got it now. Here’s my code…

body #page { background: transparent; }

#primary { background-color: <color+alpha of your choice>; }

#branding { background: transparent; }