WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] content background opacity (8 posts)

  1. katjo15
    Member
    Posted 2 years 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:
    http://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!

  2. Kharis Sulistiyono
    Member
    Posted 2 years ago #

    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%.

  3. katjo15
    Member
    Posted 2 years ago #

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

  4. katjo15
    Member
    Posted 2 years ago #

    @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?

    http://www.lethalamounts.com/dev/

    Thanks!

  5. katjo15
    Member
    Posted 2 years ago #

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

  6. rohanperry
    Member
    Posted 1 year ago #

    Thanks this helped me a lot.

  7. RBCadmin
    Member
    Posted 1 year ago #

    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.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    @RBCadmin, You can discuss that in your own thread

Topic Closed

This topic has been closed to new replies.

About this Topic