Full Screen Background Image with Content Overlayed

Support
#1

Hi, I’m working on a new website and our client wants a full screen background on all pages (the same one on each) - not just to appear around the very edges outside the content - and I’ve found a thread on your old forum which is a few years old and I’ve followed the instructions but can’t get it to work! The content I’ve added in Cornerstone appears underneath the background image!

The link to the thread is: https://theme.co/apex/forums/topic/create-fullscreen-background-image-on-any-page/

I’ve got a maintenance page on at the minute but have enabled the pass code, so I’ll put that in the private note.

What I’ve done so far is this:

  1. Created a full screen slider with Rev Slider
  2. On the Home page in Cornerstone, added it to ‘Slider Settings: Below Masthead’
  3. Added this CSS to the Custom CSS area:
    /* Home – header transparent for fullscreen bg image */
    .page-id-4.x-navbar-fixed-top-active .masthead {
    position: absolute;
    top: 0;
    width: 100%;
    height: 0px;
    }
    .page-id-4.x-navbar-fixed-top-active .x-navbar {
    background-color: transparent;
    border-bottom:none;
    }
    .x-logobar {
    background-color:transparent;
    }
    .page-id-4.x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top {
    background-color:#ffffff;
    border-bottom:1px solid #ccc;
    }
    .page-id-4.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
    }
    .page-id-4.x-navbar {
    background-color: transparent;
    border:0;
    }

Hope you can help!

Thanks!

#2

Hi There,

Cant find where to enter the password.

Please provide a mockup or an example of what you want to achieve.

Thank you

#3

Hi, sorry about that, the password key area should be showing now in the bottom right of the screen!

If you view the Home page, I’ve put the background image in and I want this to be in the background so I can overlay the content in Cornerstone on top of it, so the sections will appear over it, not under it as it currently does.

Thanks!

#4

Hi there,

Please change this code:

.page-id-4.x-navbar-fixed-top-active .masthead {
    position: absolute;
    top: 0;
    width: 100%;
    height: 0px;
}

to

.home .x-slider-container {
    position: absolute;
    top: 0;
    width: 100%;
    height: 0px;
}

Please also make sure that the slider is set to Fullscreen in the slider settings because it is only set to Fullwidth at the moment.

Hope this helps.

#5

Hi, the slider was already set to Full Screen, but the code you gave me has worked which is great, so thanks for helping out!

Many thanks!

#6

Hi, sorry, one more thing, the background doesn’t carry on to the full height of the page when you scroll down. I can’t figure out how to get it to do this because at the minute, when you scroll down the Home page, the background image stops about half way down and I want it to extend to the bottom of the footer! Any help will be very much appreciated!

Thanks!

#7

Hi There,

You can add the background to 1 section in Cornerstone and have all the content inside that one section.

You also can click edit page, on WP Classic backend editor and select a background image for your page.

On Theme Options | Layout and Design you can set a background to every page.

Hope it helps!

#8

Hi Jade, you sorted out the CSS code for me which solved that issue, but do you know how to do it so the background goes down the full height of the page when you scroll down. I can’t figure out how to get it to do this because at the minute, when you scroll down the Home page, the background image stops about half way down and I want it to extend to the bottom of the footer! Any help will be very much appreciated! The image can be repeated if that’s one way around it, but I don’t know how to do that in the slider.

Thanks!

#9

Hi there,

If you aim to have the background image cover the entire page then you don’t have to do the previous steps you have taken. The revolution slider fullscreen will only cover the entire area or the browser that gets loaded at first - no the entire page.

What you can use is the Background Image(s) option when you edit the page in the wordpress admin area. This will add a background image to the specific page and should cover the entire dimension of the page.

#10

Hi Jade, thanks for the info, but it hasn’t worked I’m afraid. I’ve uploaded the background image to where you said, but nothing is showing on the page, the background only shows to the outside edges of the page, not full screen covering the content area. I’ve only done this on the Home page for you to see.

Cheers

#11

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#12

Hi, yep, that would be great if someone could take a look for me because I can’t figure it out!

I’ll put the info in a secure note.

Thanks!

#13

Hi There,

Thank you for the credentials. Please add this custom CSS too:

.site, .x-site {
    background-color: transparent;
}

See this: https://screencast-o-matic.com/watch/cbQieGIjNH
That white background is a renew settings. We will override it with that CSS. Change font colors of other text so it is visible.

#14

Brilliant! Thank you, you’ve sorted it! I appreciate your time and patience with this one!

Thanks again!

#15

Typically I’ve just noticed something else, sorry! I’ve added the background onto the Blog page, but it’s not showing. Can it also be applied to the single blog entry pages too?

Thanks!

#16

Hi there,

I tried checking your site but the login access you provided recently doesn’t seem to work anymore and the coming soon page is active.

Kindly provide us the access.

Thank you.

#17

Hi, sorry about that! I’ll put the details in a secure note.

#18

Hi,

Please note that when a page is set as blog it’s no longer editable.

To add background, you can add the code below in X > Launch > Options > CSS

.blog .site {
   background: url(http://seanlangley.co.uk/wp-content/uploads/2017/09/Sean-Langley-Wallpaper-Long.jpg) ;
}

Hope that helps

#19

Hi, thanks for the help, however as I can’t edit the page, I can’t specify any white background sections. Is it possible to add the background into the header area - behind the logo, social media icons and nav bar - and also in the footer with the social media icons.

And then for this to be applied to all the individual blog pages too, not just the main one.

Thanks!

#20

Hi there,

The blog page is using a file template which requires customization that goes beyond the scope of our support. As for the individual posts, you can use Cornerstone to create the posts and apply the same process suggested previously.