Quick ? Positioning background images.

[tonyking]

I have a division at a fixed place down a page. The way I ended up building this site is really weird but the header background image needs to be visible for 100 to 150 pixels in the division. (It's an elaborate banner) THEN, I have a small image I need tiled down to the footer (repeat-y) in the center of the division. I can't seem to get the background in the division positioned anywhere near the right spot. What is the best way to do this?


-------------------
header
-------------------
division
<--- background would start here

-------------------
footer

[BLiZZaRD]

easiest way would be just to edit the image and add a 150px transparent block on the top of it ;)

[tonyking]

Can't do that because it repeats on a y axis, so I would have transparent stripes across the page.

[BLiZZaRD]

those pesky invisible stripes! :D

in CSS:



body {
background: url("path/to/pic.jpg");
background-repeat: repeat-y;;
padding-top: 150px;
}

[tonyking]

Don't think that will help either. here is what I am working on:

www.stlpicks.com (http://www.stlpicks.com)

Right underneath the menu is the start of a division called "bodybg", where I tile the white background image. The problem is, that my main page background I made has some really cool shadow effects on it for the city scape. Those shadows get covered up by the new tiled white image.

If I use padding it's going to push everything down, not just the image. That's where I am stuck! I am pretty sure there is a way to code the css so that the background image soes not start it's repeat until a certain point, and thats what I need to accomplish.

Here's what the background looks like:
http://stlpicks.com/images/bg.jpg

[BLiZZaRD]

Have you tried to z-index the div behind the main bg image?

Looking at the site though, I wonder why even have the white image tile? start the div lower, and just use the white from the main image.

[tonyking]

I haven't tried to play with the z-index, that could work. The tile needs to be there because some pages are 3 screens long, some are half a page, etc etc. Plus there will be a footer image once I figure this out.

Err.... z-index won't work either :(

That will position my main content behind the other image as well.

Arg!