Transparent Header/ Show repeating background image through header

Support
#1

Is there a way to show the background pattern behind the header on this site? I could replace the header with an image but would rather it scale and line up with the background pattern.

http://hhitoys.fnb-it.com/

Thanks!

#2

Hi @fnbit,

Thank you for reaching out to us. Yes that is possible with custom CSS, try adding the following code in the Theme Options > CSS:

.x-navbar {
    background: rgb(255,255,255) url(//hhitoys.fnb-it.com/wp-content/uploads/2019/08/500_F_247471968_wnFJPRCtgkVc39rRQjLvsPpgqlxZUZ9H-1.jpg) center top repeat;
}

Don’t forget to clear all caches including your browser’s cache after adding the code to see the changes on the front-end right away as I see your content is being served by the cache. Let us know how this goes!

#3

Any way to make the color (white) over the header background semi transparent?

#4

Hey @fnbit,

To make your header color semi transparent, add the following code in the Theme Options > CSS:

.x-navbar {
    background-color: rgba(255,255,255,0.5);
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

Hmm yeah I tried that earlier with no luck before I asked. I cleared cache(s) too. Still not working. It appears transparent but the background of the header is still white underneath. I am using Fixed header does this change things?

#6

Hi @fnbit,

To show the background pattern behind the header please add this to Theme Options > CSS

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

Now the problem with this is the main content container will be transparent as well, to apply the white background back to the main content, please add this custom CSS as well.

.home .x-main.full {
	background-color: #fff;
}

Hope it helps,
Cheers!

#7

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