Home page transparent header and footer

Support
#1

Hello-

I would like our homepage to only be comprised of a background image (no content). How can I get the background for the header/logobar area and the footer to be transparent on the homepage only:

You can login to view the site i will add login credentials below.

thanks,
Kim

#2

Hi there,

The login details provided seem to be not working.

Would you mind double checking it so that we can access the site?

Thank you.

#3

Sorry about that you can try again now.

#4

Still need help with this…

#5

Hi Kim,

To achieve that, you can add this in Appearance > Customize > Custom > Edit Global CSS

.home .x-logobar,
.home .x-navbar,
.home .x-colophon.bottom {
    background-color: transparent;
}

.home .masthead {
    position: absolute;
    width: 100%;
    max-width: 1200px;
}

Hope that helps

#6

Seems to have made a mess…@paul.r can you please see what this has now done on the page:

I also would like no content box on the homepage. Just the background image.

Thank you again.

#7

Hi There,

Please update Paul’s given CSS code to this:

/*make the entire header, footer, and content area transparent*/
.home .x-logobar,
.home .x-navbar,
.home .x-colophon.bottom,
.home .site {
    background-color: transparent;
}

/*remove the border around content area*/
.home.x-boxed-layout-active .entry-wrap {
	border-width: 0;
}

Hope it helps,
Cheers!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.