Fixed-image backgrounds - getting them to work? -- SOLVED

[ardath_rekha]

I couldn't find any posts that referenced this so I thought I'd ask, because I have several layouts I'm attempting to port over that are broken without this.

A lot of my layouts make use of a fixed background behind the text, so the text scrolls over the image while the image stays still (usually coupled with transparent backgrounds on the modules and entries). I'm fine with using existing layouts -- and really don't have time to build a brand-new one from scratch anyway, argh, I have a ton of homework this semester -- but so far I've been unable to get any of them to not scroll the background image when I scrolled the page.

I found one layout in a community that had a fixed image but I haven't been able to modify the .css code its creator used to work with any of the other existing layouts (and the only thing I liked about her layout, sadly, was the fixed image).

Is there any reliable coding for fixed images? I have about half a dozen journals that can't get set up the way I want them without it, and I've tried everything in my (admittedly limited) arsenal of coding knowledge. I have one in particular that needs a non-tiling image fixed on the bottom-left of the page, and half the time I can't get it to stay still (and the other half of the time I can't get it to appear at all).

Hopefully someone has a solution for this. *crosses fingers!*

Edit: Here's the solution as worked out with the wonderful people who answered me:

I added the following to the .css (and made all other areas transparent):

#canvas { background-image: url(Image went here);
background-position: top-left;
background-attachment: fixed;
background-repeat: no-repeat; }

This worked perfectly. Users will need to make sure they set the page, module, header, and footer colors to transparent backgrounds and borders in order to achieve the effect, which can be seen here: sarah_humphries. Thank you to everybody who helped me figure out how to apply this.

Comments

[cesy]

What code are you trying for the background image? You should be able to do

#canvas {background-attachment: fixed;}

or something like that.

[sarah_humphries]

Well, I'd like to use the image in the page-background layer. The existing layouts let you specify whether or not to tile, and what alignment you want, but they don't let you pick between fixed and scrolling. Would that be #page or .page?

[sarah_humphries]

(And yes, this is the journal I'm testing out on... so far all layouts are failing rather horribly. One started refusing to let the image align in any way except center-left so I had to give up even trying with it.)

[matgb]

#canvas is the whole page. Not sure if you can do it with images defined in the customise section, but you should be able to do it in the CSS

[sarah_humphries]

Hmmmm... I tried to add it to the css and nothing is showing.

[sarah_humphries]

Oooh, there I go, I think!

[matgb]

Yup, and it actually works effectively. Generally, I dislike the effect, but for an RPG journal it looks quite good.

If you're going to be doing a lot of different layouts for different characters, learning the basic css classes is worth the effort, prtty much every style & layout uses the same set, much easier that way.

[cesy]

In your style, it is #canvas in the code.