Jump to content

Trying to Create Full Bleed Background Image on Home Page (Squarespace 7.0)

Recommended Posts

Hi all,

I'm trying to add a background image to the home page of my site below:

https://redletterphilosophy.com

The goal is to have the information under any static image of my choice rather than the current black background.  Unfortunately, I'm struggling to find how to do this and, from further research, it looks like it requires some degree of code.   If anyone has any ideas on how to get started, or the appropriate code, that would be greatly appreciated.  Thanks!

Some additional details:

Squarespace Version: 7.0

Template: Wav Records (Brine family)

Link to comment

@RedLetterPhilosophy Here's a code snippet to add a background image. Add the code under Website > Utilities > Website Tools > Custom CSS

#collection-5bdf18831ae6cf53b45abf25 .Main-content {
    background-image: url("background image url");
    background-size: cover;
    background-position: center;
}

First upload an image on Squarespace and replace "background image url" in the code with the url of the uploaded image. 

Let me know how it goes. Thanks!

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
6 hours ago, Lesum said:
#collection-5bdf18831ae6cf53b45abf25 .Main-content {
    background-image: url("background image url");
    background-size: cover;
    background-position: center;
}

Thanks so much, Lesum!  Extremely helpful and that got me almost all the way there.  If you look at the site now, most of the background image displays, but it looks like the image is not bleeding into the header and footer.

Would that require additional code or are there any settings I would need to adjust for that to display and fill the whole page?  Thanks!

Link to comment

@RedLetterPhilosophy Glad it worked! Remove the previous code and add the code below:

#collection-5bdf18831ae6cf53b45abf25 
	.Site {
		background-image: url("background image url");
		background-size: cover;
		background-position: center;
	}
	header.Header {
		background: transparent !important;
	}
	.Main {
		background-color: transparent !important;
	}
	.Footer {
		background-color: transparent !important;
	}
}

Replace "background image url" in the code with the url of the uploaded image.  Thanks!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.