Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
pduckie11570048200

CSS code for adding a background image to whole site

Question

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

Edited by justin1024
retag

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 1

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.

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...