WordPress.org

Ready to get started?Download WordPress

Forums

Vantage
How do I change the opacity of the Page Background? (6 posts)

  1. Nevermore96
    Member
    Posted 8 months ago #

    I am trying to figure out how to change the opacity of the page background (the space behind the 3 icons). I know the premium version allows me to change the color or add an image, but I would like to make it more transparent so my full background image can show through it.

    Any help or advice is greatly appreciated. Thanks!

  2. Greg Priday
    Member
    Theme Author

    Posted 8 months ago #

    You could pull this off with a little bit of custom CSS. Something like this.

    #main {
       background-color: rgba(255,255,255,0.9);
    }

    Let me know if that does the trick for you. You can change the 0.9 value to change the the opacity. A lower value will be more transparent.

  3. Nevermore96
    Member
    Posted 8 months ago #

    Hi, Greg! Thank you for the response. Unfortunately, I do not notice any changes in the opacity. I'm certain that I am placing the code in the right place, but nothing is changing for whatever reason.

  4. Nevermore96
    Member
    Posted 7 months ago #

    I managed to figure out how to change the page background's opacity with this:

    #main {
        zoom: 1;
        opacity: 0.7;
    }

    The issue I ran into with this was that it causes everything inside the border of the page background to become more transparent as well (icons, text, etc...). Is there a way to prevent the other components from becoming transparent as well?

  5. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    That's how CSS works - contained elements inherit opacity. The work-around is to create a transparent image and use that as a background image.

  6. costanzomax
    Member
    Posted 4 months ago #

    Hi,
    I have a Premium Account for Vantage theme.
    I've created a child version of vantage and I want to apply the transparency for pages in my style.css file (in vantage-child folder).

    If I put this code in Custom CSS section, it works fine, but if I put this code in my style.css it doesn't work.

    #main {
    	background: rgba(255,255,255,0.5);
    	padding: 35px;
    }

    Why?

    Thanks.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.