Background-size:cover not working properly

Question

I'm trying to have a background image use up all the space of it's container.

Things looked pretty straightforward, using background-size:cover but it doesn't work properly.

the page I'm working on can be found here

the background image is declared inline in the div with class x-bg-layer-lower-image:

<div class="x-bg-layer-lower-image" style=" background-image: url(http://jeango.net/thesphere/wp-content/uploads/2018/03/background-header.png); background-repeat: no-repeat; background-position: center; background-size: cover;"></div>

when I inspect in chrome, i clearly see that the div has it's height and width correctly occupying the entire screen. Yet the background image doesn't use up the entire space (see screenshot)

I can't see what I'm doing wrong here. Perhaps someone can help

Answer 1

Lol, Don't mind but you are such a headache man, I wasted around 30 mins finding a solution for you... Look at your background image once, it already has white spaces in top and bottom. You CSS is correct. Try opening the background image in browser and see.

Ha ha ha.