Jump to content

How to make an image the entire page?

Go to solution Solved by tuanphan,

Recommended Posts

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"

 

Link to comment
  • Solution

Add to Page Settings > Advanced > Header

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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:

1.thumb.jpg.6bf27a19ded886803fc6997eceda1196.jpg

 

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. 

2.thumb.jpg.4153bd3b53640d9dfe5093618aa32059.jpg

 

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)? 

 

Link to comment
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:

1.thumb.jpg.6bf27a19ded886803fc6997eceda1196.jpg

 

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. 

2.thumb.jpg.4153bd3b53640d9dfe5093618aa32059.jpg

 

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.