[Resolved] Adding background images to header hook

Home Forums Support Adding background images to header hook

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1434599
    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

    #1434639
    Leo
    Staff
    Customer Support

    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 🙂

    #1434682
    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.

    #1434694
    Leo
    Staff
    Customer Support

    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 🙂

    #1434700
    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.

    #1434720
    Leo
    Staff
    Customer Support

    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

    #1434771
    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

    #1435517
    Leo
    Staff
    Customer Support

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

    Glad you found them useful!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.