[Support request] Page Header Image

[David]

Greetings Tom and Leo,

I am using Page Header Image for this frontpage: http://cmcwebdev.com/privacypos/

Setting are as below for
Resize image: Enabled.
Image width: 0px
Image height: 0px
—-
Content: blank
—-
Logo: blank

Everything is working as desired. Image resizes beautifully.

But when I add content I am faced with a set of issues concerning the image resizing. You can see those results here: http://cmcwebdev.com/privacypos/privacypos-landing-page-v5a/ The image is big. It doesn’t scale like the first example.

I need to add the same copy but keep the Resizing Image function as seen here: http://cmcwebdev.com/privacypos/

Any recommendations?

[Leo]

Hi David,

I’m not certain this is the best method but give this CSS a shot?

.generate-content-header {
    background-size: inherit;
    background-repeat: no-repeat
    background-position: center;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know.

[David]

@Leo

What is the best method to address this?

Thanks!

[David]

That didn’t not work as desired. The background is not resizing. Using Simple CSS to drop in the CSS you provided.

You can see the result here: http://cmcwebdev.com/privacypos/privacypos-landing-page-v5a/

I basically need the Page Header to work as on this page http://cmcwebdev.com/privacypos/.

What do you think?

[Tom]

Background images typically don’t scale.

If you’re going to add content to the page header area, you’re better off adding the image as a static image with HTML inside the page header content along with your text.

This way the image will respond the screen as a static element instead of sitting in the background as a background image.

Let me know if that helps or not 🙂

[David]

Thanks. That is clear. I will reconstruct the header for optimal results.

[David]

Hmmm. After considering what is required for the Page Header. I need to apply the Parallax feature after I sort out the scaling issue. And that only works with background images. Correct?

[Tom]

That’s correct, parallax is mainly meant for background images that take up the entire container. Not sure much for static images of physical things like computers, cars etc..

[David]

Any recommendations for making that static image appear with parallax feature. Thanks guys!

[Tom]

I don’t think it’s possible. If you have any examples of other sites doing it definitely let me know 🙂

[David]

I was attempting to reproduce this header feature. Looks like I must go at this another way. Thanks for the input.

http://startit.select-themes.com/product-landing-page-ii/

[Tom]

What they’ve done there is set their image as a background image.

If you look at the image, they’ve made it large enough with a big empty space for the text: http://startit.select-themes.com/wp-content/uploads/2016/07/angle-slide-background.jpg

[David]

Yes, I saw that. I will have to work out another approach to get the parallax to work in the Page Header. Thanks again for your expert input, Tom.

[Tom]

No problem! 🙂

[David]

I will attempt to implement a basic version of this cool parallax feature I discovered today. Check it out very cool http://antonandirene.com/

Source code can be found on GitHub:
https://github.com/hwthorn/parallaxify

Cheers!

[Author]

Posts