[Resolved] Adding background images to header hook

[Kate]

Hi there team,

I’m looking for a way to add a background image to my Header Hook Element but can’t for the life of me figure out how to do it. I came across this support post but when I implemented the change, it didn’t display any images: https://generatepress.com/forums/topic/add-background-image-to-hook-area/
I added the code from that post to my hook’s content area within my <style> tags but maybe I’m adding it in the wrong spot?

Please note that my current site isn’t showing the hook header on the home page – it’s showing a header element that has its own issues.

Any suggestions?
Thank you! Love the theme

[Leo]

Hi there,

Just to confirm, are you referring to hooks element or header element here?

Which page can I see the issue?

Let me know 🙂

[Kate]

Hi Leo

Thanks for getting back to me so quickly!

Apologies for the confusion – I am asking how to add a background image to a header hook. There is not currently an active page using the hook, I’ve been testing on a private page of the website. What is the easiest way for me to show you the assets? I can provide a login as necessary.

[Leo]

I am asking how to add a background image to a header hook.

Just to be sure, are you referring to a hook element with header select?

If you have an example of what you are trying to achieve, I can likely provide a more clear direction as well.

Let me know 🙂

[Kate]

Yes this is a hook element with the hook set to “generate_after_header”.

The content is:

<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>

<div class="header-section">
    <div class="header-section-1">
        Content for first section
    </div>

    <div class="header-section-2">
        <div class="wrapper">

				<header>
					<h1 style="color:#929497;">Patient-centric care</h1>
				</header>

			<section class="columns">

				<div class="column">
					<p><a class="button homeghost" href="https://www.360med.care/before-hip-surgery">HIP</a></p>
				</div>

				<div class="column">
					<p><a class="button homeghost" href="https://www.360med.care/patient-partner-program">REHABILITATION</a></p>
				</div>

				<div class="column">
					<p><a class="button homeghost" href="https://www.360med.care/before-knee-surgery">KNEE</a></p>
				</div>

			</section>	

				<footer>
					<p>[sp_wpcarousel id="1303"]</p>
				</footer>

			</div>
					</div>

    <div class="header-section-3">
        Content for third section
    </div>
</div>

The reason I’m using a hook is that I need my home page header to be divided into 3 columns, with additional columns in the center area. This is so that our home page buttons (Hip / Rehabilitation / Knee) can sit at the center of our page, but still respond accordingly when displayed on mobile or tablet.

The home page you can see live right now uses a header element divided into 5 columns. It displays fine on Mobile and Desktop, but gets screwy on Tablet.

Visually, we’re trying to replicate what is currently shown on the home page of our website, but make sure that it responds accordingly on Mobile, Tablet, and Desktop.

Sorry, this is all probably rather convoluted.

[Leo]

Can I make a suggestion to try a different method to achieve this?

Using the new block element module with the container and grid blocks from GenerateBlocks would make it a whole lot easier and responsive:
https://docs.generatepress.com/article/block-element-overview/
https://generateblocks.com/

Then you would just apply background image (built-in) to the container block:
https://docs.generateblocks.com/article/container-overview/#background-image

[Kate]

It took some playing around but you’re absolutely correct – Generate Blocks was the right way to go to achieve what we were looking for and was much more user friendly.

So many ways to add Headers on GeneratePress that I didn’t even recognise that Block Elements could be used this way!

Thank you for all your assistance

[Leo]

Block element and GB are both super new but lots of potentials 🙂

Glad you found them useful!

[Author]

Posts