Jump to content

Adding Background Image to Footer Middle Block

Recommended Posts

Site URL: https://www.kristinelizabethmua.com

Hello, 

I am trying to add a background image to be added to my footer on my website. I would like to overlay a social media block over the image. Does anyone know a way to not only add a background image to the footer of your website, but whether or not that would change how you add the social media block to the footer. I'm doing a full refresh of my website & trying to get a few custom things done, but this is one things I'm unable to find.

 I've attached an image of kind of what I'm trying to do, whether or not the font overlay is happening doesn't matter. Unless of course, it's actually easier to code overlaying text over the social media block. Either way would be awesome! 198722576_ScreenShot2020-04-05at9_18_07AM.png.c48ff810fcd1451d5f8dbb8178c933b3.png

Thank you!

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Add to Home > Design > Custom CSS

div#footerBlocksBottom {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Ok so I do see part of the image, but it looks like maybe this part of the template code is disrupting it. because I only see a small portion of the image. Could that be the issue of why the image isn't showing in its entirety?

.Footer-blocks--middle  {
padding-left:100px;
padding-right:100px;
background-color: #ffffff;
}


.Site { overflow-x: hidden;
overflow-y:hidden;
}

 

Link to comment

This is how I edited the code to make it work:

div#footerBlocksMiddle {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/02/facebook-chatbox-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

Thank you so much! You were a MASSIVE help!

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.