Adding background image below menu and above Subheader

beusmarko · November 2015

Hi,

Can you please let me know is it possible to add background image above Subheader and below menu (between those two elements) and how to accomplish this for blog page and blog category pages.

Thanks

beusmarko · November 2015

Please check example here: http://postimg.org/image/v7cldvgev/

And also is it possible to add some other element there as newsletter signup (in front of background image)

Thanks

Albert · November 2015

Hi,

please send us url to page where you want to add background image because we must have a look into code first.

gyopokeith · November 2015

Hello,

The URL is here:

http://seoulistic.com/blog/

We would like to do the same with all the archive pages for other blog categories as well.

Thank you

Albert · November 2015

@gyopokeith If you want to do the same, go to Theme options > Header & Subheader > Header section and deactivate "Header: Minimalist" option first. And then, edit Blog page and set background image for "Featured image" option which is available on the right side. Please notice that there is no other workaround for this and that's the only way.

gyopokeith · November 2015

Great,

Is there a way to add padding? The image is cut off.

http://seoulistic.com/blog/

Thank you!

Albert · November 2015

Which image is cut off? There is no header backgrounds actually on your site what you can see on http://pasteboard.co/1WvIjogD.png

gyopokeith · November 2015

I've added it again: http://postimg.org/image/s5pe3nqc5/

1. The original image is wide (1400 × 736), but it's zooming in very close. And the top and bottom need some padding to fit.

2. Also, how do I keep header only for this page, but not have headers for other pages?

Right now all my pages have black headers that I would like to get rid of.

http://postimg.org/image/ku57i3049/

Thank you.

Albert · November 2015

1. Background image is not wide enough. You should upload wider image. On our demos, we always used FULL HD (1920px width) size. But to increase bottom padding, you can use below css:

body:not(.template-slider) #Header { min-height: 500px !important; }

2. If you want to remove header background from all pages except archive pages, you should use below css:

body:not(.archive) #Header { min-height: 0 !important; }

gyopokeith · November 2015

Thank you. Everything works well!

Albert · November 2015

You're welcome

Adding background image below menu and above Subheader

Comments