CSS3:Background Opacity

This is nothing new to all you CSS Ninjas. Here we will take a look at background opacity. I will show you how I achieved the look that you see if you click the demo link below.

demo

For the opacity effect I used rgba. The a is for alpha.

191, 121, 0, 0.2 is the setting that you adjust for the amount of opacity you want to achieve.

background: rgba(191, 121, 0, 1.0);

background: rgba(191, 121, 0, 1.0); Opacity set to 1.0

background: rgba(191, 121, 0, 0.5); Opacity set to 0.5

background: rgba(191, 121, 0, 0.1); Opacity set to 0.1

The other way is using just rgb with a opacity: 0.5;. So the css would look like this.

background: rgb(191, 121, 0); opacity: 0.5;

To get the desired look just change the opacity:0.5; like we did above. Works the same way.

If you want to play around with some CSS3 check out this site! css3generator.com

The City, Free WordPress Weaver Sub-theme

Here is a sub-theme I built the for the weaver wordpress theme.

What is weaver you ask?

Site: wpweaver.info

“Weaver is based on the standard WordPress 3 Twenty Ten theme. You can tweak colors and layout to your heart’s content – all without having to know a single thing about HTML or CSS. More advanced users can add their own style rules for extreme control of the theme.”

Weaver is great so far. It’s really easy to build your own custom theme. After I punch a few free designs out I will build one for my site.

Screen shots:

Whats in the zip file:
city-theme_subtheme.wvr
City_header_bg.jpg

Download

Sub-theme Install:

1. Visit http://wpweaver.info/themes/ download the Weaver theme and then upload it to your server.

2. Login to your WP-admin area.

3. Click themes, find Weaver and click Activate.

4. In the WordPress menu under Appearance click on Weaver Admin

5. Click on Save/Restore Themes.

6. Find Upload file saved on your computer. Upload city-theme_subtheme.wvr

7. Under Appearance in the WordPress menu. Click on Background.

8. Upload City_header_bg.jpg.

9. Apply these settings to the background.

Position: Center

Repeat: No Repeat

Attachment: Scroll

Color: #252525

That should be it! Have fun!