problem placing repeating image with margin from top

hi,

i'm trying to place an image of an outer glow starting about 100px below the top of the page, and all the way to the bottom of my site. since i need the 100px margin from the top, i used:
background-position 50% 100px
this was ok, and i got the margin from the top. but i when i add repeat-y (instead of no-repeat) the image repeats itself and covers the margin i created using the background-position. this seems kind of weird - is there no way of getting a margin for an image, and having it repeat itself?

 

try with padding

 

the thing is, when i try adding padding to the background class on this theme, the entire site moves down with it

 

so i assume you place a body background? If not should also work for something other
try this

in your css you have your body class. there place your regular image like always, i guess its a fixed height

ok move on from there. in your html step to the first div from where the glow image should start, guess its your content area
wrap a new div around that div, give it no width
make your new css class and give it a new background image, now you should not be in the use of any top margin

 

I replied to dev shed with a solution.

gary

 

First put a header div in inside the body and set its height to 100px and width to 100%,then put another div below it to put your contents(that's container div).
Then to the container div apply the following css
#container{background:url(image.gif) repeat-y;}
that's all.

 

@haswow:

If I understood properly, the image needs to start 100px down from the top of one side of the header, which is about 160px tall. I gave a working solution, but the OP seems to have lost interest. He hasn't replied in the eight days since; either here or on the other forum he cross-posted to.

cheers,

gary