I would like the entire background of a page to be an image. Can I do this?

I’m using the Bedford template.

In Page Header Code Injection for the page at issue enter:

<style>body {  background-image: url("imageURL") !important;  background-repeat: no-repeat !important;}#siteWrapper {  opacity: 0;}</style>

Where imageURL is the link to your image.

If the image isn’t large enough to cover the page you’ll have to use repeat, repeat-x or repeat-y instead of no-repeat. For an expiation of these values see MDN’s background-repeat Article.

Let me know how this works for you.

Yes that works perfectly except now all the writing i had on the page is behind the image... is there any way to fix that so that the image is behind the words?

In place of opacity: 0; try substituting

background-color: transparent !important;

Ok - sorry to sound dumb but lets say I am using this http://i.imgur.com/URk71q3.jpg as a test image

How would it look. I am getting syntax errors posting your code in there. Can you repost using this image so I can post it verbatim?

Also where would the header code injection actually be. I thought dropping it in to custom css would work but apparently that's not the right place.

oops Ok https://support.squarespace.com/hc/en-us/articles/205815908-Using-Code-Injection

Worked...thanks!

May be a silly question, but how do I use an image not on the internet? I have a background image on my computer and wanted to use that one...

May be a silly question, but how do I use an image not on the internet? I have a background image on my computer and wanted to use that one...

@badhammermusichttp://www.sqsp.guru/news/how-to-upload-a-file-to-squarespace

@badhammermusic Please make sure that you are only adding answers to posts when you have an answer to provide. Otherwise, you will want to add your response as a comment. I've automatically converted this for you. Since you are asking a different question, you should consider opening a new post.

@justin1024 I would like to use my background on only certain pages. Is there something I could add to my CSS

Here is the code i'm using now which works great on all pages.

siteWrapper {

background-image: url(http://lisel-larsoneicoff.squarespace.com/s/Eicoff-AloneSmaller6.jpg);
background-repeat: no-repeat; background-position: center top !important;background-image:url(static url)!important; background-repeat:no-repeat; background-attachment:fixed }

Thank you

Hi,Where should I add "background-color: transparent !important;"? I tried to add to the " body" of the code your provide but the background still covered all the text and logo I previously have on the page. Now the whole page is just the background and everything else disappeared.

Hi, Where should I add "background-color: transparent !important;"? I tried to add to the " body" of the code your provide but the background still covered all the text and logo I previously have on the page. Now the whole page is just the background and everything else disappeared.