How do I create a transparent background?

jbeach's picture
Moderator

jbeach
October 3, 2010
11:22am

I received this question from a Drupal Gardens themer.

I recently started a drupalgardens website, and I'm struggling with themeing my website. My specific question for you is: how did you make the white on your page transparent?  Is it an image that was already transparent that you uploaded, or is there a way to change the color selection to make the colors transparent rather than solid, or perhaps another solution?

The answer will follow in a response!

Status: Unresolved

Comments

Moderator
jbeach October 3, 2010
2:37pm

There are a few methods available to create transparent backgrounds in your pages. These methods all have tradeoffs of course.

RGBA color

My preferred approach is using rgba color. That's Red-Green-Blue-Alpha. The alpha channel defines transparency. For example

.wrapper-content {
  background-color: rgba( 255, 255, 255, 0.5);
}

In the above example, we declare a white background at one-half transparency. The disadvantage to this approach is that IE6-8 won't recognize it, so you need to declare a background color for IE that isn't transparent.

.wrapper-content {
  background-color: #FFFFFF;
  background-color: rgba( 255, 255, 255, 0.5);
}

IE will display a white background because it does not recognize rgba() as a color definition, so it ignores this declaration. Modern browsers will use the rgba() color definition.

If you're ok with a lower-fidelity experience in IE, also known as progressive enhancement, then this is the method for you. You can use rgba() and rgb() without an alpha channel anywhere you currently declare colors in hex values e.g. #FFFFFF.

Transparent background image

If you need to have background transparency in IE, then you should go with a repeated background image. Of course, you'll need to use the alpha filter for the transparent png in IE6 which incurs a performance hit. I would strongly recommend convincing your client or employer to drop requirements for transparent backgrounds in IE6 - it's just not worth the trouble..

.wrapper-content {
  background-attachment: scroll;
  background-color: transparent;
  background-image: url("images/bg_white_transparent.png");
  background-position: left top;
  background-repeat: repeat;
}

Assuming that you have an image named bg_white_transparent.png that is a small, tessellating background image with transparency, the code above will produce a transparent background in all major browsers except IE6.

Transparency content area on www.drupalgardens.com

If you check out www.drupalgardens.com, you'll notice that the white main content area employs gradients and transparency. The gradient fades from opaque, to translucent and then back to opaque over 750px of vertical space. This effect was achieved with the following code.

.boxed .wrapper.main .stack.section {
  background: #FFFFFF;
  background:
    transparent
    -moz-linear-gradient(
      -90deg,
      rgba(255,255,255,1) 20px,
      rgba(255,255,255, 0.75) 250px,
      rgba(255,255,255, 0.9) 600px,
      rgba(255,255,255, 1) 750px
    );
  background:
    transparent
    -webkit-gradient(
      linear,
      0 0,
      0 750,
      color-stop(0.0267, rgba(255, 255, 255, 1.0)),
      color-stop(0.3333, rgba(255, 255, 255, 0.75)),
      color-stop(0.8, rgba(255, 255, 255, 0.9)),
      color-stop(1.0, rgba(255, 255, 255, 1.0))
    );
}

Combining cutting-edge support of gradients with the rgba() color declaration, we can assemble some complex backgrounds. The last two background declarations are necessary to target Firefox and Webkit-based browsers separately. They each ignore the other's syntax.

You will also want to check out the W3C page on opacity and alpha, a related style treatment.

Jesse
Senior Front End Engineer | Amateur Violinist

Pliskin October 3, 2010
2:54pm

Hey Jesse,

Thank you for taking the time to answer my question, I really appreciate it :). All of the information really helped me to solve my theming problems. I think I'll go with your first recommendation and stay away from transparent image files. It's interesting how much you can do with a few snippets of code.

Once again, thank you! :D

Moderator
jbeach October 3, 2010
3:01pm

Great, glad I could help!

Jesse
Senior Front End Engineer | Amateur Violinist

This topic has been closed to further comments.

Feedback