[Jessica KParticipant]

Hi there,
First – thanks so much for creating the X theme. I’m really enjoying it so far and am very impressed by its flexibility. However, I was reading your notes about background images and it seems as if there’s not a way for me to set a background image that runs behind my top navigation bar and my first content band? Here’s the design I’m going for (see attached). Could you suggest a CSS alteration to help me accomplish this?

[ZeshanMember]

Hi Jessica,

Thank you for writing in and thank you very much for your kind words 🙂

To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have have provided us with your URL, we will be happy to assist you with everything.

Thank you and have a great day!

[Jessica KParticipant]

Oh – sorry about that! It’s currently password protected, simply because I don’t want the public stumbling onto it while I’m working.

URL – http://www.jessicakennedy.co/Perinatal
Password – wvperinatal304

[KoryKeymaster]

Hey Jessica,

Thank you for that! I’m assuming that you’re only wanting this particular layout to be on the homepage, is that correct? Also, how are you expecting the navigation to operate (i.e. be fixed top or static top)? And this will just be one static image, not a slider, correct? Once we have all of that additional information we can work to see if we can come up with a solution for you.

Thanks!

[Jessica KParticipant]

Hi again,
I’d like to use this layout on the homepage and around 10 other pages.

As far as navigation goes, I’d like to retain as much of the responsiveness as possible – although I know that may be a bit awkward given the images… I will likely try to find an image that will look ok if the navigation moves a bit (e.g. maybe no people/faces).

And yes, it will be one static image, not a slider.

[MrinalMember]

Hi Jessica,

I’m sorry to say but this is not possible at this moment, but fortunately we’ve found your idea valuable & added this as feature request. You’ll have this option in theme in next release. Content band above/below navbar option will be added in next theme version.

Thanks for understanding, Have a nice day!

[Jessica KParticipant]

Thank you!

[CousettMember]

Glad we were able to help. 🙂 Have a nice day.

[Philip StancilParticipant]

Hey! I’m interested in this feature, and don’t see it in the content band settings, or in the Page Settings. I do see the option to put a slider above or below the masthead (header), but I’m wanting to get the full image effect you guys have on your homepage, where the fullscreen image is stationary and the header and body content moves in front of it.

Is this possible at this point? I mean, it’s obviously possible, since http://theme.co/x/ uses this exact feature with the background pattern.

Thanks!

[HobocopParticipant]

Interested as well. I’m trying to go with the full screen approach and have a transparent header, I kinda have the effect if I opt for inline layout opposed to being stacked.

[Rue NelModerator]

Hi Guys,

Thanks for updating the thread!

Regretfully that feature isn’t included in the latest release of X. For the meantime, as an alternative, you can setup your homepage to have a transparent navbar by setting it as Fixed Top in your customizer, Appearance > Customize > Header > Navbar Position and add your content bands with the backgrounds in your homepage content. You can then add this custom css in your customizer, Appearance > Customize > Custom > CSS as well.

.home.x-navbar-fixed-top-active .masthead {
    position: absolute;
    top: 0;
    width: 100%;
}

.home.x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top{
    background-color: transparent !important;
}

This code might not be as perfect but little tweaks in relation to the stack that you are using will make a big difference towards the fullscreen image with stationary navbar over your image.

Please do create a new topic if decide to go further to have this effect in your site guys.

Regards,
X

[Philip StancilParticipant]

Thanks X!

I’ve created a new topic at https://theme.co/x/member/forums/topic/create-fullscreen-background-image-on-any-page/. This shows the full solution I found that worked for me to get fullscreen background images. Hope this helps others!

[FriechModerator]

Hi Philip,

Thank you for sharing your knowledge to others,

Cheers!

[Author]

Posts