akinzer 12 Posted May 7, 2015 (edited) Hi, I'd like to add a background image to my pre-footer. Or, alternatively, to my footer. Help please. I am using the Charlotte template. Edited May 7, 2015 by akinzer 2 pilotdesignco and Pixelfreez reacted to this Share this post Link to post
2 Levidps 0 Posted May 29, 2015 Hey, pretty easy fix to set that up. Just put the following code into settings > advanced > custom css and enter in your own numbers/url to get the results you want. It can very a bit depending on what exactly you're looking to accomplish. Refer to this link to learn more about these properties HERE Just comment if you've got any questions and I'll try to sort ya out. #preFooter { background-image: url(' URL GOES HERE '); background-size: ; background-position: ; background-repeat: ; } Share this post Link to post
0 pilotdesignco 44 Posted May 29, 2015 I'd also be looking to implement this on the Hayden template. Share this post Link to post
0 akinzer 12 Posted June 4, 2015 It didn't work for me.... I go to settings > advanced, but then there is no "custom css". I also tried injecting that code in design > custom css, but that didn't work either. ?? Share this post Link to post
0 Levidps 0 Posted June 4, 2015 (edited) @akinzer Sorry, I meant the design > custom css is where you need to put it. The code above needs to be adjusted for the image you're using. Here's some example parameters just to get you started. #preFooter { background-image: url(' URL GOES HERE '); background-size: 100% ; background-position: 0 0; background-repeat: no-repeat; } Try pasting that and comment if that doesn't work. Edited June 4, 2015 by Levidps Share this post Link to post
0 akinzer 12 Posted June 4, 2015 (edited) Thanks so much for your help! Here is what is in the box, but it still didn't seem to work? #preFooter { background-image: url(' http://tinypic.com/r/o08pzn/8 '); background-size: 100% ; background-position: 0 0; background-repeat: no-repeat; } Edited June 4, 2015 by akinzer Share this post Link to post
0 Levidps 0 Posted June 4, 2015 (edited) @akinzer try using 'http://i58.tinypic.com/o08pzn.jpg' as the url instead of the tinypic one. The image needs to end with an image file type like jpg, png, gif, or svg. Edited June 4, 2015 by Levidps Share this post Link to post
0 akinzer 12 Posted June 5, 2015 Levidps,Thank you SO much for all your help! I really appreciate your time. It worked! Yay!!!!! :D Share this post Link to post
0 melanieannelea1570047715 0 Posted March 15, 2016 @levidps this was really helpful - thank you! Share this post Link to post
0 melanieannelea1570047715 0 Posted March 15, 2016 @levidps this was really helpful - thank you! Share this post Link to post
0 minnerman 114 Posted May 10, 2016 this is not working. It was working fine for months, then today my prefooter image disappears, and the code (already in my custom CSS) is now no longer serving a purpose???? can someone explain this to me?? this is what I have #preFooter { background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2d/Charbon_-_charcoal_burning_(3106924114).jpg'); background-size: 100%; background-position: CENTER; } Can someone explain to me why this either stopped working or doesn't work currently? http://www.godbyhearth.com/ Thanks Share this post Link to post
0 dmitrykiselyov 529 Posted May 10, 2016 Hey @minnerman, Maybe some syntax error? Have you added new styles today? Share this post Link to post
0 Mhossey 19 Posted October 23, 2016 So this works perfect on desktop but noticed that the image repeats vertically on mobile. Any code to fix this so that the image does not repeat on mobile? This is what I have: #preFooter { background-image: url(http://static1.squarespace.com/static/56f70260b6aa60a67ecb9738/t/57be23ec5016e12246783e22/1472078828821/yorkie+%281%29.jpg); background-size: 100% ; background-position: ; background-repeat: ; } Share this post Link to post
0 mdwebb 0 Posted January 13, 2017 Can anyone figure out why this image might not be displaying in my prefooter?mattwebbcreative.com #prefooter { background-image: url('https://static1.squarespace.com/static/57f328ec15d5dbffa4287fdd/t/58790c273e00be246ea56cdd/1484327979240/?format=2500w'); background-size: 100% ; background-position: 0 0; background-repeat: repeat; } Share this post Link to post
0 advancify 3 Posted December 28, 2018 Thanks for sharing! Put this to work on a new project. Added a "background-repeat: repeat-x" to make it repeat horizontally and use a spacer to make the bottom of the image line up with the footer bg. It looks strange when in edit mode, but if you preview in an incognito window, it seems to line up perfectly. Here's my code. #preFooter { background-image: url('https://static1.squarespace.com/static/5bfd8878a9e0286e15de2bbc/t/5c267a61352f53619abad4dc/1546025579883/'); background-size: auto ; background-position: 0; background-repeat: repeat-x; } Share this post Link to post
Hi,
I'd like to add a background image to my pre-footer. Or, alternatively, to my footer. Help please. I am using the Charlotte template.
Edited by akinzerShare this post
Link to post