![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
ardath_rekha posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
style_systemI 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.
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.
