Remove white space fullwidth image

[KnowledgeWorker]

Hi there,

I found this code for inline CSS in another topic for making a fullwidth image responsive:

width: 100%; height: 100vh; overflow: hidden;

However it’s adding a lot of white space beneath the image when scaling down, can you help me remove that?

I’m applying the code on my 404-page here: https://openframe.org/404-2/

Thanks.

[thai]

Hi There,

Could you try changing your background image option to this?

Hope it helps

[KnowledgeWorker]

Hi Thai,

Thanks. Your suggestion does remove the white space, however, the background is not responsive on smaller devices then.

[basanta]

Hi There,

Thanks for the confirmation!

Please ignore the solution given by @thai,
and set the background color #E1F4FC

Remove padding from the section if you have.

Then select the row, make it margin less and inner container off.

Then select the column, in the customize section add following CSS.

$el{
  height: 100vh;
vertical-align: middle;
}

and also make the column text align-center.

Add the image on the column and make it 100% with.

Hope this helps!