How to Make a Full Screen Landing Page (HTML & CSS)
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about full screen backgrounds, 100% height containers and vertically centering content with flexbox.
Recommended by 3 people across 3 different months, 2015 to 2017.
What it is
A 14-minute DevTips tutorial that builds a full screen landing page using plain HTML and CSS, answering a viewer's question. It walks through sizing the page to fill the viewport and shows the finished result on Codepen.
What people said
Recommends Edson · 2015-11 · Stack Overflow · on “Full screen Background Img using just CSS”
Through the help of this great tutorial [this video] I realized that I wasn't aware of the fact that it is important to be aware of the height of the parent divs. So in order to get the section container to fill the whole page, I first had to set the parent container's (html, body, and outer div) height to 100% and then it finally worked. Thanks for the help though!
Recommends Michael Coker · 2017-01 · Stack Overflow · on “Full page image”
Your original page has html,body { height: 100%; } . Add that to the new site, and then #mega-img { height: 100%; } will have something to grow into. Check out this video for a good explanation [this video]
Recommends Jake Richardson · 2017-11 · Stack Overflow · on “vertical align multiple rows with bootstrap 4 flexbox”
For the row at the centre of the screen you could use flex box to vertically align it centre ( [this video] ) and for the row at the bottom of the page why don't you just put it into footer tags and at the bottom of the screen?
Cites RuuddR · 2017-08 · Stack Overflow · on “white borders around tag”
I am trying to create some sort of simple landing page, but the problem is that I have white borders around my image. This is what it looks like [LINK] header { font-family: Arial, Helvetica, sans-serif; background-image: url( [LINK] ); height: 100vh; background-image: url( [LINK] ); background-size: cover; background-position: center; margin-bottom: 50px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit