Site logo

Archived topic

Extend background to full page

3 replies · Started by Tanya on October 5, 2018

Viewing posts 1–4 of 4

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

Hi there,

Try adding this CSS:

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

Let me know :)

Hi Tom.
It worked. Genius, as always!

Thanks. Have a great weekend :)

Awesome!

Thanks, you too :)

This archived topic is closed to new replies.