Full Bleed Background Image for Brine 7.0 Template

Hi there!

This is my first time working on a client website on a Squarespace 7.0 template, and I'm having difficulty adding a full-bleed image background to only a specific page.  I believe they are using the Brine template.

Their existing home page has full-bleed images scrolling through.  Now they only want one static image.
Existing home page:  https://www.preminievents.com/home

To create the static image, I added a code under the Advanced settings, but the image is cut off.  I'm also not sure if this is the most practical way to achieve this.  Can you help?  Code is blue below is what I added.  The rest in black is existing code that I kept, to keep the page style.

Quote

<style>
main.Main {
    background-image: url(https://static1.squarespace.com/static/570d4b9e59827eec1255c050/t/63e3c97f1a9025685b3a4922/1675872643944/jroxpremini-0052+%281%29.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
  
    p,h1,h2,h3,h4,h5,h6{
      font-family: LinotypeDidot !important;
      font-weight: 400;
    }
  /*making header transparent*/
  .Header {
    background-color: rgba(255, 255, 255, 0.0) !important;
    position: relative;
 }
  /*changing navigation font color*/
  .tweak-header-primary-nav-hover-style-active .Header-nav .Header-nav-item {
    color: white;
    font-weight: 600;
}   
  
  /*make the page transparent*/
  .Main {
    background-color: rgba(255, 255, 255, 0) !important;
    color:white;
    margin-bottom: -20px;
  }
  /*Change the quote color*/
  .Main h2 {
    color:white;
  }
  /*Take out the banner*/
  .Intro {
    display:none;
  }
    /*make the footer transparent*/
  .Footer {
    background-color: rgba(255, 255, 255, 0) !important;
 }
  .Fotter-bottom {
    display:none;
  }
  .Footer-middle {
    display:none;
  }
  
  /*.sqs-svg-icon--list.social-icon-alignment-center {
    padding-top:12em;
       padding-bottom: 0;
  }*/
  .Footer-blocks {
    padding-top: 24em;
    padding-bottom:0;
  }
    
  /*change the color of the social icons*/
  .social-icons-style-border.social-icons-color-black .sqs-use--icon {
    fill: white;
  }
  .social-icons-style-border.social-icons-color-black .sqs-svg-icon--wrapper
  {
    border-color: white;
  }

  
</style>

Quick glance:

• Brine 7.0 Squarespace Template
• Looking for: Static full-bleed background image (to cover header, body, and footer) for specific page only https://www.preminievents.com/home-copy-020623 PW: homecopy
  • Image is currently uploaded but cut off (see attached)
• Client previously had scrolling images, now only wanting one static image

Thank you so much!
Dana

Try adding padding to this code

main.Main {
    background-image: url(https://static1.squarespace.com/static/570d4b9e59827eec1255c050/t/63e3c97f1a9025685b3a4922/1675872643944/jroxpremini-0052+%281%29.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
	padding-bottom: 100px;
}

Hey @tuanphan!

Thank you so much for your help and for responding.  I was able to partially figure out how to show the full image, but I'm running into one final roadblock.  

How do I extend the image all the way down to the footer, so that the social icons "sit" on the base of the image?  Here's what it looks like now:

Thank you,
Dana

On 2/23/2023 at 11:08 PM, danacali4nia said:

Hey @tuanphan!

Thank you so much for your help and for responding.  I was able to partially figure out how to show the full image, but I'm running into one final roadblock.  

How do I extend the image all the way down to the footer, so that the social icons "sit" on the base of the image?  Here's what it looks like now:

 

Thank you,
Dana

Page is fine now. Did you solve it?

Hi Tuan,

Not quite.  I'd like for the background to extend towards the footer, or find any way to superimpose the social icons over the bottom of the background.  Is there a way to achieve this in 7.0?

Thank you!
Dana

Never mind, I figured it out 🙂

Just took out the footer and placed the social icons on the body block...duh!  Thank you again!