custom css for background transparency

  • Hello… hoping to get some help as I’ve been reading some documentation on how to write the custom css for the site https://www.vivianadaya.com which uses Responsive theme.
    It seems content background div is” wrapper” in this theme.

    My knowledge of css is quite limited and I can’t get the result I desire which is the below color with the transparency. I inserted a fallback color for old IE browsers but I get a white content backround instead of a transparent one. can someone please tell me what is wrong in the below syntax.

    .wrapper {
    color: rgb (229, 190, 135);}/* The Fallback */
    color: rgba(229, 190, 135, 0.1); }

Viewing 3 replies - 1 through 3 (of 3 total)
  • #wrapper {
    background: rgb (229,190,135);
    background: rgba(229,190,135,0.1);
}

    That is the correct code, but it makes it really hard to read.
    (You’re going to have to style your widget backgrounds to match, also)

    Thread Starter Sab Rena

    (@missbb)

    Thanks for yur quick reply!
    From my reading I had understood that going through the rgba setting would avoid giving opacity to the content (text) so it wouldn’t be hard to read. I can probably change the text to a regular black instead of a grey that might help already.

    Also I am curious as to why you removed “the fallback”, does this mean that wordpress will understand it must uses background: rgba(229,190,135,0.1); all all times but for visitors using IE6 ?

    For the widgets it would then be something like this

    #widgets {
    background: rgb (229,190,135);
    background: rgba(229,190,135,0.1);
    }

    ? thanks in advance for your help

    .widget-wrapper  {
background: rgb (229,190,135);
background: rgba(229,190,135,0.1);
}

    /* The Fallback */ is just a comment for your info and doesn’t effect browsers.

    The reason it is hard to read is because your image is dark and multi-toned. It will be hard to read no matter what color you make your text.

    You can try using white instead of that peach color and increasing the opacity from 0.1 to 0.5 or more. I think I’d go with 0.8.

    Legibility is so important. If I come across a site that’s hard to read I won’t even bother.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘custom css for background transparency’ is closed to new replies.