CSS：3x3 repeat-y背景的顶部和底部限制？

Question

I have the following problem:

I need to apply a background, which have a repeat-y on it, to fill my div vertical. Now I have the problem, that it should not fill from top:0 and but from 85px away from top, so I need something like

position:absolute;
top:85px;
bottom:85px;

for a background applied in css.

Some additional information of my problem is can found here: How to place a responsive background according to content height with HTML / CSS?

how can i achieve that ?

my structure is the following:

<content><innercontent></innercontent></content>

content has the whole width of the browser, and innercontent has a fixed width.

#content {
    background: 
    url("images/bg-top.png") no-repeat scroll center top, 
    url("images/bg-bottom.png") no-repeat scroll center bottom, 
    url("/images/bg-middle.png") repeat-y scroll center center transparent;
    position:relative;
}

Can someone help me ?

Answer 1

If I'm understanding you correctly, simply change it to this:

#content {
    background: 
    url("images/bg-top.png") no-repeat scroll center top, 
    url("images/bg-bottom.png") no-repeat scroll center bottom, 
    url("/images/bg-middle.png") repeat-y scroll center 85px transparent;
    position:relative;
}

Note the 85px in place of center for the background position y.

http://jsfiddle.net/ghKb2/1/

Answer 2

finally i found it:

just create a div with this:

#middle-stripe {
  background: url("/wp-content/themes/vitaphone/library/images/bg-middle.png") repeat-y scroll center center transparent;
   position: absolute;
   top:85px;
   bottom:85px;
   width:100%;
 }