<div class="bgimage bgimage-cover" style="background-image:url(...);"></div>

It took days for me to find a good solution. When you place your background image as first child element of the body, it will be much easier. Best solution i found is like this:

<div class="bgimage bgimage-cover" style="background-image: url( '...' )">

.bg-overlay {
z-index: 0;
}

.bgimage {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:-1;
overflow-y:scroll;
max-width:none;
width:100vw;
margin:0;
}

.bgimage-cover {
z-index:0;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}

@Rally Homelancer
Thank you!
That was exactly what is was looking for!

@Arsalan Shah Thank you, background-size:cover was exactly what i needed but didnt seem to work. The solution from Rally worked perfect!

Thank you!

@Dieter
I think I know what you mean.

Currently the login page shows something like this:
Where the background does not fully fill up the page even though the background was designed to fill up the page.

You want it to look like this:
Where the background is fully shown on the page.

You could add this to your CSS:

   html { height:100%; }
    .opensource-socalnetwork { height:100%; }
    .ossn-page-container {height: 100%;}
    .ossn-inner-page { height:100%; }
    .ossn-layout-startup { height: 100%;}

How do you mean by 100% height? however looking at your side shows that you added css property background-height which is invalid there is no background-height in css.

The background size is showing background-size:cover; isn't it what you wanted?