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.

[cimorene]

I'd say the same thing cesy said. The code for a fixed background image is simple; you just have to make sure you've found the right part of the CSS to attach it to. If you know the style you want to add a fixed image to you should link to it specifically and I'm sure someone here will be able to help you.

[sarah_humphries]

This is the account I'm testing it on. At the moment I'm trying to get it to work with one of the Basic Boxes styles. I have the image as the page background, positioned in the top-left corner, with all of the other backgrounds currently set to transparent. Attempts to put it in the body codes (and have the page transparent too) have failed every time so far.

[jana]

The problem is easily fixed - just remove the space between url and (http://yourimage.jpg) and you're good to go :)

[sarah_humphries]

Excellent, it's finally working. Thank you so much. :)