Home>Support>Full page background image

Full page background image

By Ryan Launchbury, 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].

How would I go about setting a background image to cover the full page. So as the masthead and header are transparent and the background image shows through.

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, 9 months ago Andrew Misplon
    Hi, I Work Here

    Hi Ryan

    Thanks for running Vantage.

    If Vantage is in boxed layout mode you can set a background image via Appearance > Customize > Background Image. You’d then need to set the opacity of your main containers by inserting the following under Appearance > Custom CSS:

    /* Vantage Set Page Opacity */

header#masthead {
background: rgba(255, 255, 255, 0.5) !important; 

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

#colophon {
background: rgba(255, 255, 255, 0.5) !important; 
}

    The first three numbers for each property is the color followed by the opacity. The containers go header, body and then footer (#colophon).

    To set a background image when using the full width layout you’d need to use Appearance > Customize and set a masthead, page and footer background on their own.

    You could try setting an overall background image in the full width layout using the following Custom CSS, I haven’t tested this though:

    /* Background Image Cover */

body {
background-image: url('http://localhost/so/wp-content/uploads/2014/09/ujKaaIATKKx7vi5kkfQn__DSC39322-1024x6831.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;
}
  2. 10 years, 9 months ago Ryan Launchbury

    All sorted, thank you!

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

    Nicely done. Glad to hear that helped. All the best.

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