[Resolved] Extend background to full page

[Tanya]

Hi GeneratePress.

I’d like to extend background to the full page on my Login page.
Here is a post with similar question: https://generatepress.com/forums/topic/background-image-full-page/?bbp_reply_to=199828&_wpnonce=b8b2ae8e41#new-post

As per this post, I have added 2 hooks with display rules Page > Login page.
Hook #1. before_header. <div class="full-container">
Hook #2. wp_footer. </div>

My CSS:

.full-container {
    background-image: url("/wp-content/uploads/2018/10/login-bg.jpg");
	background-position: top center;
        background-repeat: no-repeat;
	background-size:cover;
}

I still see white space after background ends on wide screens.
Note that footer (as well as other elements) are on Login page. Perhaps this is why hooks do not work?

I also have this CSS to extend the footer (for the pages that have it). Perhaps it is interfering with .full_container CSS? Removing this CSS did not help though.

/* Extend footer color for the short pages, when footer is pushed up. */
.site-footer:after {
position: fixed;
background: #563d7c;
height: 100%;
width: 100%;
}

I tried placing footer hook in “after_footer” or just in “footer”.
I tried playing with “background-size” property, setting it to background-size:100%,100%; for example. It does not work, unfortunately.

I use sections on the page and I removed Background image from section settings, relying only on .full-container CSS.

Any help would be appreciated 🙂

GeneratePress 2.1.4

GP Premium 1.7.2

[Tom]

Hi there,

Try adding this CSS:

.full-container {
    min-height: 100vh;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Tanya]

Hi Tom.
It worked. Genius, as always!

Thanks. Have a great weekend 🙂

[Tom]

Awesome!

Thanks, you too 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts