Jump to content

Scroll nav and page over fixed background

Recommended Posts

Site URL: https://www.galballyobryan.com.au/

Hi! I figured out how to fix background image but am having trouble keeping the footer the same color. Would this be an issue with the code that I'm using? 

 

.section-background img {
    position: fixed !important;
}

 

Also, I would love to move the Nav bar below and have it show up only when I begin scrolling (like the inspo site). Thank you!

 

My site:

https://corbin-law.squarespace.com/

password: hsiung

 

Link to comment
  • Replies 9
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

Hi,

Q1. You mean change footer background color??

Q2. On Homepage or all pages?

And you want to add an image on above header

or add a Slider, or add an Image + Text..

...

Each will have a different solution, an image is easiest.

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
1 hour ago, pamelah said:

Sorry, I should've been more clear! I want the background image to remain fixed, but to disappear once I scroll down. Similar to these websites: https://www.tsmplaw.com/https://www.galballyobryan.com.au/

Right now the fixed background image is taking over the entire page. 

You mean add background image for footer + add an image above header? (image only, no text, no slider)?

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
On 7/10/2021 at 1:49 AM, pamelah said:

I would like the footer to have a solid color. Right now the background image shows in the footer and I can't see the words in the footer. Hoping to create it just like this homepage: https://www.galballyobryan.com.au/

 

 

You can edit Site Footer >> Replace background image with color?

Edited by tuanphan

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
On 7/12/2021 at 2:42 AM, pamelah said:

Hmm...I tried that but the color doesn't show up. The background image still shows in the footer. 

Okay. Try adding this code to Design > Custom CSS

/* footer color */
footer#footer-sections .section-background {
    background-color: #ff11ff !important;
}

 

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
  • 2 years later...
On 2/29/2024 at 3:37 PM, Leanie said:

Hi, Has anyone figured this issue out with the footer, have tried your code @tuanphan but it still shows the background image in the footer with the color as an overlay

Screenshot 2024-02-29 at 10.36.46.png

Screenshot 2024-02-29 at 10.36.58.png

Use this CSS code, if it doesn't work, please share site url, I can check easier

footer.sections, footer.sections section {
	z-index: 99999999999 !important;
}

 

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

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.