[Resolved] Add Background Image

[Elaine]

Hello, I would like to add a background image to the main content area of the home page;
the hook is either:
generate_before_main_content or
generate_inside_container
However, what I have tried so far is just add a div with a class and then in the xtra CSS in the Customizer indicate that the div have a background image.
The image shows up, but it does not ‘cover’ the content area as desired.
Please advise!

GP Premium 1.7.8

[David]

Hi there,

maybe this will help:

https://docs.generatepress.com/article/backgrounds-overview/

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

[Elaine]

OK, that is very helpful, thanks! However, how do I target a background image in the Content for just the Home page?

[David]

You would need to use CSS like this:

.home.separate-containers .inside-article {
    background-image: url('full_url_to_image');
}

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

[Elaine]

I added my full (url path to the image) to your CSS, but does not seem to be working! Image does not show. I also added ‘background-size: cover;’, that doesn’t help either.
Please advise! Thanks.

[David]

Sorry made a slight typo – i edited the code above

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

[Elaine]

Yay! That works, and thank you!

[David]

Glad to be of help

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

[Author]

Posts