Solved Fullpage image over two columns

Basically I wish to have two images side-by-side to fill out the entire screen. I currently have a fullwidth section consisting of a row with two columns of equal width. I chose to have two columns since I would like the seperation between the images to be left-right on desktop and tablets, but upper-lower on mobile.

On desktop it currently looks like this:

Problem: The images are too tall which gives a scrollbar on the right side.


Mobile it looks like this:

Problem: The images don't fill out the screen vertically which produces a white area below them.

Currently the settings for the background image for each column are:
image size: cover
image position: center (top-center for column 2)
image repeat: no repeat

The spacing settings of the row currently are:
custom margin: 0 0 0 0
custom padding 0 0 0 0
column 1 custom padding: 25% 25% 0 0
column 2 custom padding: 25% 25% 0 0

Sizing settings of row:
Fullwidth: yes
custom width: no
custom gutter width: yes (= 1)
equalize column heights: yes

How do I achieve this?

Thanks in advance!

Sidenote: After this problem has been solved I'd like to also have an image (logo) show up top-center on desktop, and center-center on mobile.

 

https://factumprojectontwikkeling.be/splash-screen/ (password: "mathivh").

I seem to have it working partially. I might have created it in a way that's not really considered good-practice, I'm not sure.
The problem I have now is that when the screen size decreases, the buttons move upwards, and the company logo moves downwards. I'm trying to get them to stay on the same height (relative to the background-image) on all desktop screen sizes.

 

By using "vh" instead of "%" in margin of the buttons and company logo, it now stays more or less constant when resizing. I'm still not sure if I'm doing it in a way that won't give any unexpected results for some.

 

Alright, I'll stick to those units then, thanks.

I'm now trying to get our company logo to touch the top of the page, and to not resize across different desktop screen sizes. How would I go on to get that?

 

That works just great, thanks a lot!

For mobile I'd like the layout to be similar but in a horizontal-oriented fashion, like so:

Would I be best to create a second section and set visibilities according to device?

 

Correct! I gave it a try, and it seems to be working out fine. Thanks for you help!