Semi-transparent on top of Transparnt

Community Forums Forums General Discussion Semi-transparent on top of Transparnt

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  defree99 1 year, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #81869


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

    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?


    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.



    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.