Jump to content

CSS code for adding a background image to whole site

Recommended Posts

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

Link to comment
  • Replies 10
  • Views 12k
  • Created
  • Last Reply

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

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

My pleasure.

Follow Churchill: never give up!

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

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?

Link to comment

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.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

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.

Link to comment

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

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment
  • 1 year later...
  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.