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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.