content background opacity

  • Resolved katjo15

    (@katjo15)


    12 years, 11 months ago

    Hello,

    I have been looking through the forums trying to find a way to adjust the CONTENT background opacity so that the MAIN background shows through.

    Here is the site I am working on:
    https://lethalamounts.com/dev/

    The content background is currently a solid black and when I try to adjust the opacity of this element, all child elements take on this opacity as well. Does anyone know how to accomplish what I am trying to? I’d like to adjust the content background opacity to 70% but leave the actual content text and images at 100%.

    Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)

  • You can make a transparent background color only for CONTENT background by using rgba color value in CSS rather than using opacity. RGBA stands for Red, Green, Blue, Alpha Channel.

    The first step. You have to find the id or class CSS selector of your content background element. If your content background is declared as <div class=”content”> then in your style.css, try to do this :

    div.content{
background-color: rgba(0, 0, 0, 0.7);
/* rgb = 0 0 0 is black color */
/* a = 0.7 is 70% of alpha channel */
}

    It’ll make the background color has opacity 70%, but the contents inside (text and images) are still at 100%.

    Thread Starter katjo15

    (@katjo15)

    Yes, this is exactly what I was looking for! Your explanation is perfectly clear and straight forward. Muchas gracias!

    Thread Starter katjo15

    (@katjo15)

    @kharisblank, I’m hoping you may be able to answer another question. Using the rgba colors, I have achieved the exact effect I was hoping for, however, there is a delay when I load the website and a gray shade is in place while the rgba color loads. Do you know if this delay is avoidable?

    https://www.lethalamounts.com/dev/

    Thanks!

    Thread Starter katjo15

    (@katjo15)

    Nevermind, I figured it out. I just adjusted the default background color that loads first. Thanks!

    Thanks this helped me a lot.

    RBCadmin

    (@rbcadmin)

    How do I find the id or class of the content background? I would really like to do this also but I don’t know how to get that info.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @rbcadmin, You can discuss that in your own thread

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘content background opacity’ is closed to new replies.