Page Header Image

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.

@Leo

What is the best method to address this?

Thanks!

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?

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 :)

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

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?

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

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

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

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/

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

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.

No problem! :)

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!