Background opacity [how to apply to background only, not contents?]

Author Posts



I’ve created a selector on a text and I’d like to add a background to the text with a 50% opacity.

How can I make the opacity apply only to the background and not the text too ?

Thank you.


Hi, Greggot,

It’s been my experience that any element having opacity applied will also have it apply to all nested elements. There used to be an image pack available for Microthemer 2.x that I’ve made use of. I couldn’t find it on the site when I looked today, though. Sebastian had several images of various transparencies and various colours available.

I just use one of those and have it repeat so that nested elements stay as is. Before the image packs I’d just make my own in photoshop -a 10×10 png is plenty.


Hi guys,

Here is the opacity image packs Abland mentioned:

  3. See instructions for installing a design pack here

If either of the packs happen to contain the right colour they could work for you. Semi-transparent background images will work consistently in all browsers. But if you don’t want/need to support Internet Explorer 8, you can add rgba color values to any Microthemer color field. This is currently a bit awkward with the current color picker (a new one is on the way soon). But you can do the following:

  1. If you already have a HEX value that was generated using the Microthemer color picker (e.g. #35628F), copy and paste it into the big hex field using this tool:
  2. Adjust the opacity using the slider to something like 50%
  3. Then copy the value in the RGBA field and paste it in the Microthemer background color field, replacing the hex value.
  4. This should give the background color opacity without affecting the text (as with the opacity CSS property option)

I hope that helps. Please let me know if you require further assistance.



Ok, great ! Thank you for the help.


You’re welcome.

You must login or register to reply to this topic.