Jump to content

Header covering the top of Background of First Section 7.1

Recommended Posts

If you make your header transparent, part of the background from the first section appears below it. If you turn off transparency that part of the backgrounds gets hidden underneath the header. It's even explained in the support docs that this is the default behavior.

Is there a way to prevent this from happening and have the first section actually start below the header? I feel like if it's not transparent it should start below it.

Edited by ChrisBartow

Creating websites using Squarespace at Design by Donuts 🍩

Link to comment
  • 1 year later...
13 hours ago, EmilyJoannWilkins said:

Hey @ChrisBartow thank you for posting this. It worked, but it's adding a margin to all of my sections, not just the first one. Did you have that problem? Any ideas?

What is your site url? We can help easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 9 months later...
On 12/14/2022 at 12:00 AM, floren_dina said:

Hello @tuanphan, I have the same problem. 

I tried this:

#sections:first-child .section-background {
  margin-top:60px;
}

It worked, but it's adding a margin to all of my sections, not just the first one. How can I change this to just one section?

You missing # symbol. Try this

article sections:first-child .section-background {
  margin-top:60px;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

I got a pretty good workaround for this problem from Squarespace's customer support.

Rather than using a background image, you can add an image block to the first section, drag its left and right sides to the edges of the page, and set a custom section height of 1 pixel. That essentially re-creates the background image, but the focus point will be calculated correctly.

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.