Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Need Full Width Background Image with Vertically Centered Text

Home Forums Support Need Full Width Background Image with Vertically Centered Text

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #383604
    Beau

    Okay, here’s what I need. Hopefully you can help.

    I know creating this will require Flexbox, which I’m learning, but I’m wondering if I can do it in a section.

    There will be a large banner background image that is 100% width of browser and will always show 100% height of actual image (about 600px actual size), and will reduce its size based on the browser width. There will be NO padding on left, right (haven’t been able to figure this out without globally changing padding) or top or bottom of image.

    There will be basic copy that will overlay the image and be centered vertically and left justified, but within the normal confines of a 1200px layout (not all the way to the left of the browser window).

    GeneratePress 1.4
    #383642
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Is there any way you can link me to an example of what you’re wanting to achieve? I’m having trouble picturing it 100%.

    Let me know 🙂

    #385694
    Beau

    Okay let’s forget the centered copy for now…

    The background image (in a section) needs to be FULLY responsive and show 100% of the image at all times, regardless of the screen size. So as you narrow the browser window, the background image will ALWAYS go from the left side of the window to the right WHILE maintaining its height, so you can see the entire image – same thing for bigger windows.

    Here’s what I have set in the section settings:

    • Box Type: Full Width
    • Inner Box Type: Full Width
    • Top Padding: 40px
    • Bottom Padding: 40px

    I’m using an image that is 1632 x 650

    The image is currently doing what I want, but I can only see 80px of height (because of the padding and there’s no other content in the section). If I increase the padding at al, the responsive-ness won’t work. 🙁

    Website is: haseltinedesign.com password: maine

    Please help! And thank you!

    #385701
    Beau

    Also… I just tested out the (new and improved) Page Header. It’s SO close to doing what I want.

    The “Full Screen” switch is almost what I want, but I don’t need it to max out at the bottom of the browser window – I just need the background image to stay 100% width of browser and let the height be whatever it needs to be, in order to be proportional.

    #385758
    Tom
    Lead Developer
    Lead Developer

    Hmm, I think you would need some sort of custom javascript in order to do something like that. As far as I’m aware, it’s not possible to have a container size itself based on the size of the background image without using javascript.

    One thing that comes to mind would be using a static image inside a container (instead of a background image), and then a position:absolute text container sitting on top of it..

    Something like:

    <div class="your-container">
        <img src="URL TO YOUR IMAGE" alt="" />
        <div class="container-text">Your text</div>
    </div>

    Then your CSS:

    .your-container img {
        height: 100%;
        width: 100%;
    }
    
    .your-container .container-text {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    Experimental, but might get you close.

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