Adding Background Image to Footer Middle Block

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! 

Thank you!

Can you share link to your site? it is https://www.kristinelizabethmua.com/contact ?

Hi! Yes, thats the link to my site https://www.kristinelizabethmua.com - however, I am currently editing the template I'm working on, so I have a cover page active & so what I'm looking for would be applied to the newly coming homepage, which will be https://www.kristinelizabethmua.com/home (which is what it is normally)

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;
}

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;
}

Can you add image first? Difficult to helpt without see image

Facepalm. I figured it out. The code was for the Bottom Footer Block. I switched it to middle & now it's perf!

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!