This is a follow-up post to https://theme.co/x/member/forums/topic/full-screen-background-image-behind-the-nav-bar-and-my-first-content-band/. This post is to show fellow Xers how to create a fullscreen background image on any page.

X used to natively support fullscreen background images on a per-page basis, but somewhere along the way that feature was deprecated (though it should be brought back posthaste!). The good news is you can still get the same effect by following this guide.

The following code will need to be added to your child theme’s style.css file if you’re comfortable with FTP. Otherwise, add it to your Customizer’s CSS in the WordPress backend (Appearance > Customize > Custom > CSS).

/* Home - header transparent for fullscreen bg image */
.home.x-navbar-fixed-top-active .masthead {
    position: absolute;
    top: 0;
    width: 100%;
}

.home.x-navbar-fixed-top-active .x-navbar {
    background-color: transparent;
	border-bottom:none;
}

.x-logobar {
	background-color:transparent;
}

.home.x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top {
	background-color:#ffffff;
	border-bottom:1px solid #ccc;
}

I’m using the Integrity stack in this particular instance, so it’s important to note that you will need to go through and tweak this code to your particular use case. For instance, you’ll notice that I have .home in the code above because I’m editing the home page. Each page will have a custom post class that you can target. X adds .home to homepages, but to target other pages, you’ll need to find its post ID. This YouTube video will help you find it: https://www.youtube.com/watch?v=fLg2T1AvmFE. Once you’ve found the post ID number, you can create your CSS class by writing ‘post-####’ where ‘####’ is your number. So, to be incredibly thorough, a post with an ID of 14 would be targeted in your CSS by writing ‘.post-14’.

Once you’ve done that, you’ll also probably want to make sure that your logo file is a PNG, not a JPG, to maintain transparency since JPG doesn’t support transparency. That’ll give you a prettier result than a logo with a white background on top of a fullscreen background image! In X, you set your logo in Appearance > Customize > Header > Logo.

The next step is to go create a slider in Slider Revolution. If you haven’t already installed the plugin, no worries – it comes free with X. Navigate to Addons > Extensions. You’ll find Slider Revolution listed there, and you can install it with ease. This YouTube playlist by ThemePunch (the makers of Slider Revolution) will help you with the basics of creating a slider. So, go ahead and create a new slider. When creating the slider, there are a few useful tweaks to make to the Slider Settings:

1. Set the Slider Layout to ‘Full Screen’
2. Navigate to ‘Loop and Progress in the right sidebar. Set ‘Stop Slider’ to ‘On’.
3. Set ‘Stop at Slide’ to 1
4. Set ‘Show Progressbar’ to ‘Hide’
5. Set ‘Loop Single Slide’ to ‘Off’

Now, save all that. You’ll find yourself on a screen showing you all your slides, or lack thereof.

1. Click the blue ‘New Slide’ button. It’ll ask you for an image. This is where you add the background image you want to use for your page.
2. Once that’s done, click the green ‘Edit Slide’ button.
3. In the ‘General Slide Settings’ section, select Transitions. Turn off ‘Random Flat and Premium’. Turn on ‘Fade’ or ‘No Transition’. This is a personal choice, so do as you deem appropriate for your project.
4. Click the green ‘Update Slide’ button at the bottom of the screen.

Alright, we’re almost done!

In the WordPress backend, edit the page where you want to add the fullscreen background image. Scroll down below the main body text input box (or Visual Composer, if you’re using it). Scroll down and you’ll find ‘Slider Settings: Below Masthead’. Select the slider you want to use. New options will appear below that dropdown. The ‘Enable Scroll Bottom Anchor’ will create a down arrow on the screen to help people realize there’s more content below the fullscreen image. You can decide if your viewers will need that or not. If you use it, the ‘Scroll Bottom Anchor Alignment’ is another setting you’ll want to look at. That setting will let you choose where to place the scroll down arrow. I generally use ‘Bottom Center’. The ‘Scroll Bottom Anchor Color’ and the ‘Scroll Bottom Anchor Color Hover’ let you choose what color to make the arrow.

You’re done! After you’ve gone through all those settings, hit the blue ‘Update’ button and go check out the results of your work!

I put this guide together because it seems like a very popular feature, and it took me a bit of searching and working to settle on this solution. I hope you like it, and I hope Theme.co will consider adding it to the Knowledge Base. Even better would be a simple option on each page to create a fullscreen background image, but that’s another story! Thanks for reading.

We thank you to creating a detailed tutorial for our users. Thank you for great work 🙂

Thanks.

I mentioned a ThemePunch YouTube playlist link in the article, but forgot to link to it. Here it is: https://www.youtube.com/playlist?list=PLSCdqDWVMJPNfL70ym3rCF9QwqgXr4k_2.

You can try adding .masthead as your offset container under revslider settings.

http://screencast.com/t/fHWLxUQKZOj

Hope that helps.

Is it possible that tweaking the JavaScript for the Scroll Bottom Anchor function? I really don’t know my way around that code, so if you can suggest anything that might help, I’d be grateful!

Header area is always part of scroll positioning. That’s because it’s always there, except at your site’s case.

I inspect the code and it still there. Why not use Blank template with no header?

Or maybe add this css,

.home.x-navbar-static-active .masthead {
height: 0px;
}

Cheers!

.home.x-navbar-fixed-top-active .masthead {
   height:0px;
}

Thanks for the amazing support as usual! Wish I could update the code at the beginning of the thread. Hopefully people read down this far.