[Philip StancilParticipant]

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.

[Prasant RaiModerator]

Hello Philip,

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

Thanks.

[Philip StancilParticipant]

You’re welcome!

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.

[ChristianModerator]

Thanks again Philip.

[Philip StancilParticipant]

Hey! I’ve just noticed that there’s an issue with my implementation of fullscreen background images. When using the Scroll Bottom Anchor, it adds the height of the logo to the amount it scrolls down, so it effectively scrolls past content I want the viewer to see. You can currently see an example of this at http://848.549.myftpupload.com/, at least until I fix it! If you guys have any suggestions, I’d appreciate it! I understand if this is outside the scope of support, as it’s a bug based on my customizations. I’m just not a JavaScript guy, so I’m up a creek. If I figure out a solution, I post it back here for others.

[Paul RModerator]

Hi Philip,

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

http://screencast.com/t/fHWLxUQKZOj

Hope that helps.

[Philip StancilParticipant]

Thanks for the thought! Unfortunately, doing that or using Offset Size both actually decrease the full height of the ‘fullscreen’ slider by the size of .masthead, so when the page loads, if the masthead section is 200px tall, then the bottom 200px of the screen is whatever content comes after what is supposed to be a fullscreen slider, if that makes sense. So it doesn’t resolve the issue, but rather exascerbates it.

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!

[RadModerator]

Hi there,

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!

[Philip StancilParticipant]

That did it! The code you supplied fixed it, though in my case it was fixed-top, not static, so it looked like this:

.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.

[ChristopherModerator]

You are welcome and thanks for sharing.

[fredriklyhagenParticipant]

Thanks for a great tutorial Philipe!!

I’ve followed it but can’t get it right, background image starts below header.
http://www.fredriklyhagen.com

Any ideas?

[fredriklyhagenParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello @fredriklyhagen,

Thanks for updating the thread! Please edit your page using Cornerstone and go to Settings tab. You can insert the background image from there are shown in this screenshot: http://prntscr.com/7fo41o. This background image is only good for this page. If you want to insert a general background image for the entire site, you may go to your customizer, Appearance > Customize > Layout & Design > Background Options.

Hope this helps. Kindly let us know.

[fredriklyhagenParticipant]

Thanks! I just figured out the error. I had put the code in the Appearance >> Editor in the Dashboard. Moved it to CSS field in Customizer and it worked.

Now I’m trying to get rid of the border between header and main and can’t figure it out.

[LelyModerator]

Hello Fredrik,

Glad that you figured it out.

To remove that line, please add the following CSS code in your Customizer via Appearance > Customize > Custom > CSS:

.x-navbar {
  box-shadow:none;
}

Hope this helps.

[Author]

Posts