CSS code for adding a background image to whole site

Hi,

I'm currently using the Bedford template and it doesn't allow for a background image.

It is my understanding that you can use CSS to do this. This is the first time I have used CSS. I used it on this site to change the font already and that worked.

I have spent two days going to different forums and trying all the codes I can find and nothing seems to work.

This is the site I'm working on: http://phyredup.life

There is currently a banner image set up with the image I want as a background because my client wants it on there and that's the best I can do right now.

Can anyone help?

Thanks so much!

Patti

Try this in Design > Custom CSS:

#siteWrapper {
 background-image: url("http://static1.squarespace.com/static/5720ff31cf80a163a4dd3cf8/t/5755edd93c44d889597f3a64/1465249248427/Watermark+chosen+red.jpg?format=1500w");
}  

Let me know how it works.

-Steve

THANK YOU Steve!! I had pretty much given up and was feeling utterly defeated. It works beautifully! Thank you so much!

My pleasure.

Follow Churchill: never give up!

Hi Steve - Today someone I'm working with went to the site and couldn't see the background image. I see it all the time on my computer, my partner's computer and both of our phones. But it doesn't show up on this other person's computer (and she was using a Macbook and Chrome browser, the same as me). Any ideas what would cause the background image not to show up for certain people?

I checked the site on my MacBook Air (OS X El Capitan 10.11.5) using Chrome 51.0.2704.84 (64-bit) and FireFox 47.0 (the latest versions so far as I know). The image was there. However, in Safari 9.1.1 (also current) it was not.

As to your friend not seeing it in Chrome, she may be using an earlier version. As to why it's not there in Safari, I'm not sure. Is it an SVG image? Earlier versions of some browsers did not support SVG well. See the Browser Compatability table at MDN's article Background.

Thanks for the info.

Unfortunately, I'm not sure what an SVG image is. I'm a bit of a novice with this stuff. I learn very quickly, but am in no way trained in any of this. Learning from reading articles, trial and error and forums.

The image was a JPG that I altered in photoshop and turned back into a JPG. That's all I can tell you.

I'm afraid I'm of no help on this. If you're using Photoshop you're already far ahead of me in imagery.

If you want to pursue it, you might pose the question on Stack Overflow. They're some really smart people.

If you do find something out, post a comment. I'd be interested to learn.

Best,

-Steve

Ok. I changed where it is pointing and it seems to be showing up for me still. Hopefully it works for everyone now.

Thanks.

Hi, I'm wokring in the template Jasper and was wondering if this code should work for it as well. Thanks!

Josh

Actually, realized what I need help with is how to get the URL. How do I make a url for an image or how do I download it to the site to get that path?

Thanks!

hello !

for anyone using Wells template this seems to work :- )

body {background: url(yourimage.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}