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

[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).

[Tom]

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 🙂

[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!

[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.

[Tom]

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.

[Author]

Posts