Jump to content

Adding a Background Image on a Single Page in 7.0??

Recommended Posts

Site URL: https://www.honeyphillips.com/olivia-and-the-orc-v2


I am having issues adding custom CSS for a background image on a single page using the code injector.   It shows mostly okay in the editor, with the exception of a weird gap, but does not show on the front end.  I am fairly new to CSS and I am not sure where I went wrong with the code.   Can anyone advise? 


Image 1 (Editor)



Image 2 (Front-End)



Code Used:

.Header, .Footer, .Mobile-bar {
display:none !important;
  background-image: url(https://static1.squarespace.com/static/5ccbb149a568273fb0aad690/t/628e8efa8826f40d5709c685/1653509883202/Screen+Shot+2022-05-25+at+4.13.57+PM.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 100%;
  opacity: .2;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -10;
.Header--bottom {
  background-color: transparent;

#about h1,
#about p {
  color: white;

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.