[Resolved] Use section background image as fullscreen header image

[Tom]

Glad we could help 🙂

[Kelly]

I have a follow-up question to page header content. I have a third party widget that I want to flooat over the header image in the bottom left corner. I put that widget code in my content section and it works fine, but the issue is that I do not see the full page header image. There is a much narrower window that contains and displays the page header image and resizes as the screen width changes. What I want is the full image to show and shrink as the screen shrinks…like it does when I have just the page header image display without and page header content.

Is this not possible? I have tried adding empty space above the code in the content section thinking it might expand the content window. I also thought of displaying the image and the widget in the page content (instead of using the page header function) and working with CSS positioning to overlay the widget, but since I have a left and right margin set for the site, the image doesn’t display full screen/bleed.

This image is what I would like to accomplish…and shrinks with the screen resizing:

This image is what I actually get when using the header content with background image

This is a screenshot of my page header content settings

Any insight would be most helpful.

[Tom]

In order for content (HTML) to show up on top of an image, it needs to be a background image.

Background images don’t scale down like a static image does, it still wants to fill the area that it’s in.

What you could try is setting the top/bottom padding to percentage, and play with the value. Using a percentage for the padding should resize the height of the area as you size down.

Let me know 🙂

[Kelly]

Thanks for the reply, but that doesn’t really do what I need, and I find that my “content” will actually jump out of the background with margins adjusted.

Also, it’s not necessarily correct that “In order for content (HTML) to show up on top of an image, it needs to be a background image.” With CSS you can style a DIV to overlay another, as explained here for an example. http://www.echoecho.com/csslayers.htm

Really what I am trying to accomplish is like the page headers in this website where the image shrinks along with the screen and the item (in this case a <h2> element. http://www.spiritrock.org/teachers/visiting-teachers

Am I using the wrong theme for the job?

[Tom]

You can do it that way as well.

1. Remove the page header image.
2. Add it using HTML in the content area:

<div class="page-header-image-background">
    <img src="URL TO YOUR BACKGROUND IMAGE" alt="" />
    <div class="badge">
        Code for your badge goes here
    </div>
</div>

Then add this CSS:

.page-header-image-background {
    position: relative;
}

.badge {
    position: absolute;
    left: 20px;
    bottom: 20px;
}

[Kelly]

Thanks Tom. That got me ever so closer. The image is full size (but doesn’t go full width which I can live with) and the badge sits where I want it, but now the page header content sits over top of my page content immediately following.

[Tom]

Any chance you can link me to the page?

[Kelly]

I sent reply to support email

[Author]

Posts