CSS resizing menu and content background images

Question

Hello,

I need to have resizable menu and content background images for my site, so both of them get stretched whenever the menu entries are too many, or the contents go outside the borders of the content background. I need vertical stretching.

Could you, please, give me a hint (an actual answer would work as well) or a link to a good example?

Thank you very much in advance!

Answer 1

You'll probably need to organize a group of elements into something like the following:

html:

<div id="element">
   <div id="elementTop">
     <div id="elementBottom">

     </div>
  </div>
</div>

css:

#element {
  // tileable background image, repeat-y;
}
#elementTop {
  // top, fixed portion of the background image, no-repeat
}
#elementBottom {
  // bottom, fixed portion of the background image, no-repeat, set to:
  background-position: 0 100%;
}