Non-scrolling background image *and* a header?

[dhae_knight_1]

I really, really like the layout I have now, with one tiny little problem; I would really like to fix my background image so it didn't scroll and repeat, because, frankly, it sucks at tiling height-wise.

I found this: http://style-system.dreamwidth.org/22713.html, which unfortunately removes my header, but I can't find anything else.

Is it even possible? Or do I need to get creative and smush both background and header together into one massive picture and then make that one fixed?

Comments

[stormy]

Take the wood background image, and add it to the css like this, changing URLOFIMAGE to the URL of your background uploaded somewhere on the internet. I took the liberty of looking at your photobucket to grab the url I thought it was.

body {background: url(URLOFIMAGE) fixed}

or

body {background: url(http://i733.photobucket.com/albums/ww337/dhaeknight/WoodenHedge.jpg) fixed}

Now, if you're absolutely sure you don't want it to repeat at all, you can do the following, but this would literally show the image once on the page, or you can change no-repeat to repeat-x or repeat-y based on the axis you would like it to repeat itself. Fixed should solve the overall problem alone, though. It won't move on the page at all.

body {background: url(URLOFIMAGE) fixed no-repeat}

[dhae_knight_1]

Thank you - that did exactly what I wanted! :-D

[ninetydegrees]

You need to add this to your custom CSS:


body {
background-attachment: fixed;
}