Semi-transparent on top of Transparnt

[defree99]

I have managed to create a transparent background for the home page.

http://tinyurl.com/k9vphjr

But I can't seem to create a white semi-transparent background only for the text area (I'm simply trying to make the text area easier to read while while maintaining the transparency).

So in essence I need a semi transparent text area on top on the already transparent background.

I'm stuck. Any ideas how to do this?

[Ben @ Inbound Creative]

Hi defree99,

If you're trying to make the text easier to read, it might not be best to go for a white background while you're text is white.

I had a quick mess around and found that a black background looks slightly better with white text.

You have a div with the style "colorbox". I'm not sure how that style is applied, but if it was by you, the easiest way of changing it would be to swap the word 'colorbox' with the following:

background: rgba(0, 0, 0, 0.6);
padding: 19px;

The background sets the color – for example, if you wanted to change the text color to black and have the background as white, simply change all the 0s to 255.

The last bit – currently 0.6 controls the opacity. 1 is opaque while 0 is transparent. 0.7 would make it more opaque while 0.5 would make it more transparent. You see what I mean?

As for the padding, that's personal preference. I personally don't like text that runs up to the edge of a box. 19px is the max you can set it at without the boxes dropping under one another. Feel free to set it to less.

The best thing that you could do – if it is possible – is to assign the div with a class or ID and put that code into your style.css file rather than using style though.

Hope that helps.

---

Award winning web design in Liverpool | UK based Genesis Framework web designer and developer

[defree99]

Thank you so much!

It is 99% perfect.

My only remaining issue is that the opaque /transparent setting. It does not seem to matter whether I use 0.2 or 1.0.

The transparency level doesn't change.

Any help on this final issue would be greatly appreciated.

[Author]

Posts