[Resolved] Background image body per page?

[Annie]

Hi,

Is there an easy way to set a background image and colours per page, that covers everything ( header, menu and footer)? Like with storefront pro plugin ( https://vimeo.com/163655685 )

Now if I use a body BG image, I can achieve that but its on all the pages, not just one?
https://logologics.nl/budget-website-sport/t/

Using the page header can be done per page, however is very limited.
One needs to use html to add some text or image over the header secetion, and can not edit with elementor elements ( not editable for each mobile, tablet and desktop view ).
https://logologics.nl/budget-website-sport/coach/

The header ofcourse does not expand way until the footer eather.
I am new to Generate Press PRO so am I missing something or can this not be done?
If not, will this be added? I am afraid this could be a dealbreaker for me and apart from this, I love Generatepress/elementor combo a lot!

Thanks!
Annie

[Leo]

Hi there,

It can be done with some simple CSS. See Tom’s post here: https://generatepress.com/forums/topic/page-header-image-does-not-appear-on-page-with-active-section/#post-354171

Let me know if you need more info.

[Annie]

Hi Leo,

Thanks for helping me out.
I saw that topic before posting, was hoping for a “cusomize per page” option.

I will give that css a try!

Thanks,
Annie

[Leo]

No problem!

The customizer options are mostly global options.

Any per page options would be in the meta boxes in the Edit Page screen but unfortunately background images is not an available option currently.

Let me know if you need more info 🙂

[Annie]

Hi Leo,

The css works great indeed for a background image per page, thank you!

However, on a page with a full body image, the header, menu and footer will need to be transparent or semi transparent. The other pages, will not have such a large BG image and will need some color in header and footer instead of being transparent.

The per page options ( I am used to ( so far ) in Storefront theme+ storefront Pro plugin ) add an extra option in the customizer with “page customizer ). That makes it possible to edit each page differently. Please look at my screenshots:

https://www.awesomescreenshot.com/image/2700814/a1fa92459111a5718d51ef58149476ad

https://www.awesomescreenshot.com/image/2700841/228497ed14dd5c8e973a788016431633

It would be awesome if this could be added to Generatepress PRO.
I suppose adding some css only in that BG page to change colors ( make semi transparent and probably other colors menu items ( so they can pop on a bg image ) would be a work around?

If so would you kindly provide that css code for it please?

Thanks,
Annie

PS.
Actually, using Elementors Canvas template is almost perfect for what I want without interfering with the look of the other pages as you can see here:
https://logologics.nl/budget-website-sport/

Unfortunately the Canvas template strips off the header and therefore no menu.
I have to manually add menu by using buttons, doable for a small site, but not for larger sites or shops..

[Leo]

Hmm the per page customizations haven’t been requested a lot so I’m not sure if it’s a good idea to add it – the more things we add the harder it is to keep theme/plugin fast and light 🙂

Here are all the menu CSS: https://gist.github.com/generatepress/793804f553c25c70823c

[Annie]

Good point, speed is one of the reasons I am exploring Generatepress/Elementor!
I will experiment with the css.

Thanks,
Annie

[Leo]

Sounds good.

Let us know if you need more help on CSS 🙂

[Annie]

Just wanted to let you know ( and maybe help others searching for this ) that adding the css works fine!

However, I found out, this is not even necessary and can be achieved by following this:
https://docs.generatepress.com/article/merging-header-navigation-content/

Header section on the page you want to let the primary menu come over the content of your already created page:

Image: do not add one
Content: add this: <!– page header –>
Advanced: Merge with site header, place content behind header, transparent navigation, chose colors for menu items.

This way I also get what I was asking for in this post, without the need of extra css!

Even more impressed by the possibilities of Generatepress ( PRO )!!

Annie

[Leo]

Awesome! Thanks for sharing the solution 🙂

[Author]

Posts