Home>Support>Background Transparency

Background Transparency

By Mindy Bowman, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi! I have Vantage Premium installed on a site and have added some Custome CSS to upload a photo to the page wrapper and then I’ve added the CSS to make the footer and header transparent with the body being only 50% transparent.

You can see that it’s working correctly on the home page but not on any of the other pages. Is there more code I need to enter?

This is what I have now:

/* Fixed Background Image for Site */

#page-wrapper {  
  background-image: url(wp-content/uploads/BG12.jpg);  
  background-repeat: no-repeat;
    background-position: center center !important;  
  background-attachment: fixed;  
  -webkit-background-size: cover;  
  -moz-background-size: cover;  
  -o-background-size: cover;  
  background-size: cover;  
}

/* Transparent Background */

#main {
   background-color: rgba(255,255,255,0.5) !important;
}

#masthead {
   background-color: transparent !important;
}

#colophon {
   background-color: transparent !important;
}

Any help would be greatly appreciated! :-)

URL: http://fishcodemo.newequus.com/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 10 months ago Mindy Bowman

    One more thing to note, it is working on the shop category pages because I have a plug-in for special backgrounds and banners running there.

    It’s just not working on the main tabs.

    Thanks!

  2. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Mindy

    Thanks for running Vantage.

    The manner in which you’ve handled opacity for the #main div is correct. Making background-color transparent for the header and footer though will make them completely transparent. You’ll need to use the same method for those divs. Namely RGBA.

  3. 10 years, 10 months ago Mindy Bowman

    Hi Andrew,

    Yes, I want them completely transparent, but what isn’t happening is the background photo that I’ve uploaded in the page-wrapper is only showing on the home page…not the other top level menu pages.

    Do you have some insight on that?

    Thanks!

  4. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Ok with you now. Try making the url in your Custom CSS absolute and not relative. wp-content/uploads/BG12.jpg works on the home page but becomes http://fishcodemo.newequus.com/about-us/ wp-content/uploads/BG12.jpg on the about page which will 404.

  5. 10 years, 10 months ago Mindy Bowman

    Andrew, that did the trick! Thanks so much. :-)

  6. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    For sure, glad we could help.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More