Support » Theme: Vantage » How do I change the opacity of the Page Background?

  • 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!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Greg Priday


    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.

    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.

    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?

    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.

    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;



Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How do I change the opacity of the Page Background?’ is closed to new replies.