Home>Support>Applying background for entire image from masthead, slider, page and footer

Applying background for entire image from masthead, slider, page and footer

By lee, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi Andrew/ Support team,

I am trying to apply ONE image for the entire webpage, and I followed the advise from the following thread:

Full page background image

but the background showed up only after the slider image. Is it possible to have that one image from Masthead to the footer, basically stretching the entire page.

Thanks

URL: http://upstore.com.my/englisheagleasia/

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

  1. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi Lee

    This is pretty challenging with the full width layout. I’d recommend switching to the boxed layout under theme settings, you could then add an overall background image from Appearance > Customize. The image would cover everything outside of the content area. The problem with full width is the page doesn’t have an overall container, it’s split up into parts.

    You could also try the following under Appearance > Custom CSS with Boxed Layout activated. This CSS will give you a full width header and footer but the normal boxed content area. Using this method the background image wouldn’t show in the header or footer, just on either side of the main content area:

    /* Vantage Boxed Layout With 100% Width Header and Footer */

body.responsive.layout-boxed #page-wrapper header#masthead .full-container {
margin: 0 auto;
max-width: 1080px !important;
}

body.responsive #page-wrapper {
max-width: 100%;
padding-top: 0;
}

#main-slider {
margin: 0 auto;  
max-width: 1080px;
}

#main { 
margin: 0 auto;  
max-width: 1080px;
}

#colophon {
margin: 0 auto;  
max-width: 100%;
}

#colophon #footer-widgets {
margin: 0 auto;  
max-width: 1080px;
}
  2. 9 years, 7 months ago lee

    Hi Andrew,

    Thanks for helping, I am going for option one you proposed…

    Just some last bit here on the footer, I think there should be somewhere to set the background image, just the footer (refer to the bottom):
    http://upstore.com.my/englisheaglehk/

    Currently its grey colour.

    I have tried CSS codes like

     #footer{
  background: url("http:

    and

    .layout-full #footer-widgets {
  background: url("http://upstore.com.my/englisheaglehk/wp-content/uploads/2015/02/Fotolia_33002085_XL_Footer.png"); background-repeat: no-repeat;
}
  3. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    For sure, that’s actually the body background:

    body {
background: red;
}
  4. 9 years, 7 months ago lee

    Hi Andrew,

    If you refer to the website below:
    upstore.com.my/englisheaglehk

    I was refering to the white area at the footer.

    Could you pls help with that?

    Thanks

  5. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    For sure, that’s the area I sent. Include the last CSS I sent under Appearance > Custom CSS and change red to the color you require. Ok, I see now you were asking to set a background image there. So rather just say:

    body.custom-background {
background-size: cover;
}
  6. 9 years, 7 months ago lee

    Thanks Andrew,

    Appreciate this. Will let you know again.

    Best regards and have a good weekend

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

    For sure, let us know how you come along. Have a good weekend too!

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