• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer

❤ OrganicWeb

Australian Mailchimp Training Partners

  • Home
  • Services
    • Mailchimp Public Classes
      • Adelaide
      • Auckland
      • Brisbane
      • Melbourne
      • Online
      • Perth
      • Singapore
      • Sydney
      • Wellington
    • Mailchimp Corporate Training
    • Mailchimp Consulting
  • Blog
  • Contact & About
You are here: Home / Internet / How to make a Background Transparent but not Text

How to make a Background Transparent but not Text

October 23, 2011 by Gary 1 Comment

On a Website (WordPress or other) you may want to use opacity with some content background whilst having the text non-transparent. Until recently there hasn’t been a simple means of doing this; often an image would be used to facilitate making the background semi-transparent/opaque. Not only was this time consuming, but there were also the negative Page load speed implications of using images over CSS or HTML.

CSS3 and Opacity

Fortunately with CSS3 there is a simple way to use CSS to make a background opaque whilst all other elements retain their default opacity value (or no opacity as is usual).

CSS3 RGBA for Background Only Opacity

Here is an example of how to use CSS3 to create a semi-transparent background whilst not making the text transparent (the example illustrates some CSS I used for a WordPress menu recently where I wanted the sub-menu background to be semi-opaque while the text remained non-opaque):

.menu-item ul li{background-color: rgba(245,222,179,0.9);}

You’ll probably notice that all that has been done is to use the RGB colour code (rather than the colour name or hex value) using ‘RGBA’ (the ‘a’ refering to ‘Alpha’) and then adding the level of opacity required as the last value; in this case 0.9).

For backward compatibility, it is worth adding a non RGBA color value prior to the RGBS value. For browsers that don’t support CSS3 RGBA, the colour defined prior to the RGBA value will be shown e.g.

.menu-item ul li {background-color:wheat; background-color: rgba(245,222,179,0.9);}

Simple!

Found this useful? Please share:

  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • More
  • Click to email this to a friend (Opens in new window)

Related

Filed Under: Internet Tagged With: CSS, instructions, WordPress

Contact Gary now

Email: [email protected] Telephone: (+61) 04 1092 3445

Gary from OrganicWeb
  • This field is for validation purposes and should be left unchanged.

What our clients have to say

Gary totally blew my mind with the possibilities available & how they can work for my business specifically."
Kim, Brisbane
Great facilitator and ensured the whole class was happy and competent at the end of the session."
Natalie, Sydney
Don't waste time looking anywhere else - contact Gary today, you won't be disappointed."
Evelyne, Sydney
He is knowledgeable and gifted on the in's and out's of Mailchimp and email campaigns. I highly recommend him! He will make your efforts count!"
Fred, Melbourne
I highly recommend anyone seeking information on how to use Mailchimp to attend one of Gary's expert workshops."
Beverley, Gold Coast
I was constantly updated by email with progress of the work, which was completed to my total satisfaction. Highly recommendable company."
Harry, London

Learn Mailchimp

Attend one of our classes and learn the tips and tricks to incredible results using Mailchimp
Learn More

Leave a Reply Cancel reply

Want Mailchimp Training?

Gary now offers his Mailchimp class online. Learn from a Mailchimp Partner

Learn Mailchimp

Australian Mailchimp Partners

What our clients say

"Gary was awesome! He has a fantastic way of making everything rather simple and straightforward. I definitely left with a lot more knowledge, confidence and ideas than when I walked in. Thanks Gary!" Fiona

View our reviews on Google

Australian Mailchimp Classes

Want to learn Mailchimp?

See Dates

Meet Gary, Mailchimp Expert

Gary Eckstein is listed by Mailchimp as an Expert.

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event.

Contact Gary for your Mailchimp needs

READY TO GET STARTED?

Contact Gary today to get started with Mailchimp consulting, training or integrations.

Get in touch!

Copyright © 2019 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.