Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Add div around #page

  • Hello, I’m new to using the theme, so I’m still looking around and trying to figure things out. There are times where I’d prefer to start a background-image below the navigation that spans the full screen. I know I can add a background to the body, but sometimes I need the image to start just below the navigation. Is there a way to use a hook to add an opening div before #page, and a closing div afterwards? I looked at the list of hooks but I don’t see anything like that I don’t think.

  • Hi there,

    There are workarounds I can think of:

    1. Add the background image to the body and set a solid color for the header and navigation so it covers the image.

    2. Use this CSS:

    #page {
        background-image: url('http://BACKGROUND IMAGE URL HERE')
    }

    Learn how to add CSS: https://docs.generatepress.com/article/adding-css/

    Let me know if this helps 🙂

  • That will still start the background at the top of the page and part of it will be hidden by the header and navigation, and if I really need the image to start right at the top of the content area that doesn’t work. It will work fine a lot of the time, but not always.

  • That will still start the background at the top of the page and part of it will be hidden by the header and navigation

    No it won’t, unless your header is merged with content.

    Can I see your site?

  • Here’s an example https://k10pilates.com/ there’s a gradient right below the header. It’s a background-image, but I don’t see how I could do that with an image or CSS using Generate Press.

  • This might be a better example: https://resources.winterstreetdesign.com/

    I set a background image on the body using the built in options. If I want to see all the tops of the mountains in this image http://resources.winterstreetdesign.com/wp-content/uploads/2024/06/Screen-Shot-2024-06-07-at-1.41.17-PM.png I can’t because it’s hidden by the header. I don’t see a div in the markup that I could apply a background image to (in a child theme is fine, not the built in tools) so that the tops of the mountains would show and it would expand the full width of the site.

    I could apply css to make #page go 100% and then add styles for .site-content to behave like #page currently is. But it seems like I might have other issues I have to account for if I do that.

  • Like this https://resources.winterstreetdesign.com/about/ but I just wonder how many other things will show up as a problem because I’m messing with the layout

  • Like this https://resources.winterstreetdesign.com/about/ but I just wonder how many other things will show up as a problem because I’m messing with the layout

    It’s impossible for us to predict this unfortunately.

    Another method I can think of is to set the Content Container to full width:
    https://docs.generatepress.com/article/content-container/

    Then add a GB container with the desired background image:
    https://docs.generateblocks.com/article/container-overview/
    https://docs.generateblocks.com/article/backgrounds-options-overview/

    Then build the content using GB’s container block with a solid background color similar to the 4th container here:
    https://docs.generateblocks.com/article/container-overview/

    You should keep in mind that background images are not responsive by nature so you will likely run into some issues when the page length is long or on different devices.

    A content background image usually works the best when it’s like a gradient color or pattern etc so responsive won’t be an issue.

  • If we use a background image it usually transitions to a solid color on either the top or bottom. I’ll take a look at these other ideas. Thanks.

  • Sounds good.

  • I think that work if I just wanted to do that on the home page, but it seems like a lot to deal with if I have to do it throughout a site, especially if a client is going to be working on it after I hand it over.

    But I think I understand the options available. Thanks for your assistance.

  • No problem 🙂

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