Fullscreen hero image on home page load

[LukeDesign82]

Hi all, I am getting back into CSS/HTML after many years off. I am building a website in Squarespace. I am trying to set up the home page with a hero image in the header that takes up the full screen (or snapped to full screen) on desktop. Then, when you scroll down it displays the navigation bar.

Here is an example from another website:
https://rudneynovaes.com

This would only be for the home page.

Thank you!

 

[tomliv]

Do you have a question about your build?

 

[LukeDesign82]

Do you have a question about your build?

Yes, I am unsure if this can be achieved through Squarespace's settings - or if I can do this with code.

Yes, I am unsure if this can be achieved through Squarespace's settings - or if I can do this with code.

Here is my website on the page I am trying to do this:

https://www.lucasano.com/home

I found this code from another designer who had success, but it’s not working for me:

/* Add a banner */
body.homepage div#siteWrapper:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/660dabf2c74e425529726520/t/661a73f4b369d36c1bd3199b/1713009653619/TEST_home-page.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 500px;
}
/* Add sticky header */
header#header {
    position: sticky !important;
    top: 0;
}

Do you have a question about your build?

 

[OldMan]

What are you paying for your site? If you can't do this look at HostGator. I have a site there and have done this in the past, so I know it can be done.

 

[tomliv]

Yes, I am unsure if this can be achieved through Squarespace's settings - or if I can do this with code.


Here is my website on the page I am trying to do this:

https://www.lucasano.com/home

I found this code from another designer who had success, but it’s not working for me:

/* Add a banner */
body.homepage div#siteWrapper:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/660dabf2c74e425529726520/t/661a73f4b369d36c1bd3199b/1713009653619/TEST_home-page.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 500px;
}
/* Add sticky header */
header#header {
    position: sticky !important;
    top: 0;
}

I'm not that familiar with what is possible in the SquareSpace interface, but if you can get to the code, then I see no reason you cannot achieve this.

There are a couple ways to achieve the full-viewport background image. I've done a container with BG image that is width:100% and height: 100dvh or 100vh. Using dvh unit may help alleviate mobile browser issues where the browser chrome shifts on scroll (looking at you Safari).

As for the sticky nav, getting this to work can be tricky. Usually the issue is the placement of the nav itself in the html. It must be a child of the container that is full content HEIGHT. If the parent is no taller than the nav it won't 'stick' as the parent will be scrolled out of view. In the example layout you show, the nav would be at the top of the content BELOW the full-height image container.

So:

<parent> <--position:relative
Header
Nav <--position:sticky
Content
</parent>

or

header
<parent> <--position:relative
nav <--position:sticky
content
</parent>

HTH