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

Bedford: How can I add an image to a page background?

Question

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

I’m using the Bedford template.

Edited by 2CAdmin
Tidy

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 0

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.

Edited by alxfyv
Add in the <style> tags, bold part that needs changing

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

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?

Share this post


Link to post
  • 0

In place of opacity: 0; try substituting

background-color: transparent !important;


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

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...