Prefooter background image

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.

I'd also be looking to implement this on the Hayden template.

Please provide link to website.

www.arieleikinzerphotography.com

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

Worked flawlessly. Thank you!

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. ??

@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.

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

@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.

Levidps,Thank you SO much for all your help! I really appreciate your time. It worked! Yay!!!!! :D

@levidps this was really helpful - thank you!

@levidps this was really helpful - thank you!

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

Hey @minnerman,

Maybe some syntax error? Have you added new styles today?

Worked for me. Thank you!

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

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

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