How to make an image the entire page?

I'm playing around with a concept. Before I get too deep into it, can anyone tell me if it's possible to make an image the full screen? I'd love for it to be full screen, so that my site title and navigation is hidden--ideally, nothing shows but the image and the text. Is there a way to do this through Custom CSS (NOT header injection; I don't have that feature in my current plan, but I can upgrade if I need to).

• Here's the test page: https://www.nateburdette.com/page1
• Password: gogogadget
• Template: York
• Collection-id: 5e2f24e0bf10fb4a2fe3588c
• Current image block: Image block with "poster"

like this? You can use CSS to hide header/footer, remove padding left/right (you only need Personal Plan)

2 hours ago, tuanphan said:

like this? You can use CSS to hide header/footer, remove padding left/right (you only need Personal Plan)

Yes, that is perfect. Can you share this code with me or point me in the right direction? 

Add to Page Settings > Advanced > Header

<style>
  header#header {
    display: none;
}
  main#page {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}
</style>

@tuanphan Worked so far, but is it possible to make my image fill the entire browser (either by changing image size or adjusting side padding)? Right now it only fills ~70% of browser:

My header is still showing on mobile. Is there a way to hide this and make my image full screen (right now it compresses like this). I tried some code but it didn't do the trick. 

Any help would be appreciated! My goal is to have a page with an image that fills 100% of the browser (no nav, no footer, no negative space) and two buttons. Any help on installing another button on this page would also be welcomed (poster image block only comes with one button; possible to add another)? 

On 1/31/2020 at 1:29 AM, BeeperChirp said:

@tuanphan Worked so far, but is it possible to make my image fill the entire browser (either by changing image size or adjusting side padding)? Right now it only fills ~70% of browser:

 

My header is still showing on mobile. Is there a way to hide this and make my image full screen (right now it compresses like this). I tried some code but it didn't do the trick. 

 

Any help would be appreciated! My goal is to have a page with an image that fills 100% of the browser (no nav, no footer, no negative space) and two buttons. Any help on installing another button on this page would also be welcomed (poster image block only comes with one button; possible to add another)? 

 

I figured it out. The cover page layout accomplishes all this. Who knew. Here's the end format result: https://www.nateburdette.com/where-am-i

PASS: gogogadget