[Support request] How to restrict background images to certain page types?

[John]

Hi there,

I am figuring my way through your theme and really love it – thank you!!
I have two questions if I may….
1. I am struggling to find how to add a background image only to templates which I am designing for internal pages.
So for example, in this site I am also using Beaver Builder to design the Home page.
And when I add background images to the content/body, it also add sit to the home page – how can I stop that from happening?
Is there a way to attach the Background image to the internal pages only? Or force white to be background for the content and body of the home page?

2. I have created a page header/hero combination: http://staging2.powertomakeadifference.com/sample-page/
I want to be able to move the page title lower – into the grey area – but when I add any type of padding to the header/hero, it causes the image which I am using to give the ripped effect to zoom out and not look good.
Is there a way I can add margin/padding to the top of the page title without affecting this?

Thank you for your time!
John

[David]

Hi there,

1. If you want to remove the background image just from the home page you can use this CSS:

body.home {
    background-image: none;
}

2. Tricky one as any increase in size of the header element will effect the background image. The alternative is to create a Hook Element to apply the background, select the after_header hook.

Add this HTML to it:

<div class="hero-divider">
    <!-- background image-->
</div>

Then apply this CSS to add the background:

.hero-divider {
    background-image: url(add_the_url_to_backgound_image_here);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 50px;
}

[John]

Thank you for your help David.
I tried applying that css but it does not impact the home page on the site.
http://staging2.powertomakeadifference.com/
Can you please take a look again at what I might be doing wrong?

And I will create a hook later today and hopefully fix those header issue!

[Leo]

That CSS should work but I don’t see it being added.

Here is the existing CSS in Additional CSS field from the code:
https://www.screencast.com/t/GhMufeftWu

[John]

Sorry I added it a few different ways and removed it again.
It is back in there now…

[Leo]

The code is working from what I can tell.

Maybe you are wanting to remove the content background image instead?

.home.one-container .container {
    background-image: none;
}

Let me know 🙂

[John]

Ah yes…this is it – thank you!

[Leo]

No problem 🙂

[John]

Thank you all for your help so far.

In relation to number 2 (adding the after header hook)
I have done this, but still finding the Title to be loading above the new hook.

What suggestions do you have for controlling the location of the Page Title.
I want it to be down in the grey, beneath the After Header Hook.

Many thanks again

[David]

Can you edit the Hook Element and change the Priority to 1. this should move the hook above the hero.

[John]

Thanks David – this was it – just getting used to the GP hooks and elements so should have this from now on.

Sorry there is one small issue with the hook showing above the Nav Bar on Mobile versions.
I don’t see any way to edit the element to have different priority for mobile versions.
Is there a work around for this?

[David]

Oh forgot about that lol.
The hero is hooked in after the header with a priority of 9, and the navs are between 5 – 7. So try try priority 8

[Author]

Posts