Need a solution to have consistent background image display across all devices

Hi, I'm new to the forum.

I'm trying to get my background image fill the screen on any device including tablets and mobile phones, and then reveal the rest of the page as soon as you start scrolling up.

The website for Drake's clothing line (October's Very Own) works exactly the way I want my site to work, but Squarespace couldn't offer a solution and suggested I post here for help.

The attached screenshots show how my background image displays on 9 different Apple devices (Macbook, iPad, iPhone) and I'm nowhere close to figuring it out. 

Thanks in advance for anyone who can assist.

Hi @Tdot4k

To fill the screen: setting the section to Fill Screen,  Large should work. 

To "reveal": are you referring to the navigation bar?

14 hours ago, melody495 said:

Hi @Tdot4k

To fill the screen: setting the section to Fill Screen,  Large should work. 

To "reveal": are you referring to the navigation bar?

Hey @melody495

What I mean by "reveal" is basically as soon as you start scrolling, the rest of the page (below the background image) will start to appear. If you look at the example website I linked on any device, the background image is perfectly sized to the screen.

I do have "Fill Screen" turned on, and I've tried so many different combinations of default/custom height and alignment settings. As mentioned in my original post, Squarespace has advised that custom coding is required to achieve what I'm looking for... I'm posting in this section on their advice.

On 12/14/2023 at 3:16 PM, Tdot4k said:

I do have "Fill Screen" turned on, and I've tried so many different combinations of default/custom height and alignment settings. As mentioned in my original post, Squarespace has advised that custom coding is required to achieve what I'm looking for... I'm posting in this section on their advice.

Ah ok, the forum is a peer-to-peer platform to help each other out and not monitored by SquareSpace, but there are often users (like myself) able to help. Let's see.

For Fill Screen, try this in your Custom Code. Website -> Website Tools (under Not Linked) -> Custom CSS. Copy and paste into their, click save, refresh the page.

section[data-section-id="64cd1116e6a9b4051d51a9f3"] .page-section {
	height: 100vh;
}

Let me know how it goes.

1 hour ago, Tdot4k said:

What I mean by "reveal" is basically as soon as you start scrolling, the rest of the page (below the background image) will start to appear. If you look at the example website I linked on any device, the background image is perfectly sized to the screen.

Unless I have not understood what you want to achieve, you can do this within SquareSpace without any custom code.

For Reveal:

Top right corner -> click Site Styles (paint brush icon) -> Animations -> Choose a Style. e.g. Fade means blocks will fade in as you scroll.

Try them out to see which one you like best. 

30 minutes ago, melody495 said:

Ah ok, the forum is a peer-to-peer platform to help each other out and not monitored by SquareSpace, but there are often users (like myself) able to help. Let's see.

For Fill Screen, try this in your Custom Code. Website -> Website Tools (under Not Linked) -> Custom CSS. Copy and paste into their, click save, refresh the page.

#collection-64cd1116e6a9b4051d51a9f0 {
	.page-section {
		height: 100vh;
	}
}

Let me know how it goes.

I really appreciate the effort to help @melody495

It appears to have worked.... amazing! I think it's exactly what I wanted 🙂

48 minutes ago, melody495 said:

Ah ok, the forum is a peer-to-peer platform to help each other out and not monitored by SquareSpace, but there are often users (like myself) able to help. Let's see.

For Fill Screen, try this in your Custom Code. Website -> Website Tools (under Not Linked) -> Custom CSS. Copy and paste into their, click save, refresh the page.

#collection-64cd1116e6a9b4051d51a9f0 {
	.page-section {
		height: 100vh;
	}
}

Let me know how it goes.

Hmmm... so upon further inspection, it works on the background image on the home page, but it also is stretching the sections below to the same height as the background image. I've attached an image showing how it appears.

For reference, the section below is only 2 rows high but now appears as tall as the background image itself.

2 hours ago, Tdot4k said:

Hmmm... so upon further inspection, it works on the background image on the home page, but it also is stretching the sections below to the same height as the background image. I've attached an image showing how it appears.
 

I've updated my code, can you check and try the new code?

22 hours ago, melody495 said:

I've updated my code, can you check and try the new code?

The new code doesn't seem to work unfortunately. It results in the original appearance.

34 minutes ago, melody495 said:

Try this...

section[data-section-id="64cd1116e6a9b4051d51a9f3"] {
	height: 100vh;
}

 

It worked! @melody495 😀

I owe you a coffee... this has been stressing me out for months. 
Thank you so much for your prompt and patient help. Greatly appreciated!

Just now, Tdot4k said:

It worked! @melody495 😀

I owe you a coffee... this has been stressing me out for months. 
Thank you so much for your prompt and patient help. Greatly appreciated!

You are very welcome 🙂 glad it's all working for you!

@Tdot4k ps, your photos are so calming 😌 

2 minutes ago, melody495 said:

@Tdot4k ps, your photos are so calming 😌 

Aww, thanks so much! I hear that quite often and my photography journey started out as a quest to find peace and serenity as I explored my city. Thanks so much again and now I can go ahead and build out the rest of my site! 🙂

You're awesome @melody495 🙏🏽