This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

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

Open 7 replies premiumthemetheme-vantage
lee
11 years ago · Last reply by Andrew Misplon 11 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.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Andrew Misplon Staff 11 years, 23 days ago

    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. lee 11 years, 21 days ago

    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. Andrew Misplon Staff 11 years, 21 days ago

    For sure, that’s actually the body background:

    body {
background: red;
}
  4. lee 11 years, 21 days ago

    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. Andrew Misplon Staff 11 years, 21 days ago

    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. lee 11 years, 21 days ago

    Thanks Andrew,

    Appreciate this. Will let you know again.

    Best regards and have a good weekend

  7. Andrew Misplon Staff 11 years, 20 days ago

    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.

Have a different question or issue?

Start New Thread