Removing excess whitespace under background image supposed to span entire page --(SOLVED)--

HTML-CSS
#1

I have a page where all the content is on top of a background image that (should) spans the whole page.
When the browser is full screen, however, there is a significant amount of white space appearing under the image. I have tried using height: 100vh; for the image and this will fit the screen fully without the white space but it causes another issues of elements disapearing when screen size decreases.
Here is the website at two sizes: https://imgur.com/a/2T5rZDh

Here is my code (note it will look fine in codepen because the processed website does not get large enough for the whitespace to appear): https://codepen.io/anon/pen/aPYdEq?editors=1000

#2

Try overflow-x: hidden; on #showcase (and height: 100vh;)

1 Like
#3

THAT DID IT. Thank you so much. Would you mind explaining your mindset behind that solution?

#4
  1. Scratching my head and trying to remember how i have done it before.
  2. Trying the wrong things.
  3. Looking at it again and seeing that it must be an overflow issue.
  4. Throw overflow-x: hidden on it and well…it works.

Yes this is my very scientific and professional approach…lol.

1 Like
#5

Haha I love it. Thanks again!

#6

No problem happy to help.
And that’s just CSS for you, sometimes it’s miracle we get anything right.

1 Like
#7