Dynamic background image composition in html

[securobo2]

Can someone point me in the right direction on properly displaying background images. Here is what I am looking for.I would like to create a bordered background image that can stretch. I understand that I can create a left side, a middle and a right side. Paste them together and I have a complete background that I can write text over in html.Now what I need to understand is this. Is it enough to make the middle the same height as the left and right but only 1 pixel wide. Then can I just repeat it over to get a middle width, that can resize with the page. I am looking into css right now, but does anyone have a quick example of something like this. Something that properly matches up the text over the background. This is like a custom window. The simplest and shortest code would be preferable. Or a tutorial link.

[dsonesuk]

this all depends on your layout, is it fixed width, fluid width, and if you want your border effect all around.for starters, don't use 3 column (div container for left, center and right) for main content, as the side columns won't stretch to content height.

[securobo2]

this all depends on your layout, is it fixed width, fluid width, and if you want your border effect all around.for starters, don't use 3 column (div container for left, center and right) for main content, as the side columns won't stretch to content height.

It would be a 800px width image made up of a left edge, a middle and a right edge. The middle is 1px, except it should be repeated to cover the distance. If the browser window is resized, the middle would extend, but it would never get smaller. Not necessary to have special elements like borders and etc. I was thinking of a 3 column div also, but I am looking for a simple example. I am reading my HTML book now, which is why I am asking for additional examples.

[dsonesuk]

So let me get me this right!image will be a fixed height, width will be minimum width of 800px (overall), but will extend depending on resolution of user screen.if this does not extend heightwise then a 3 column div will work because you set the height of all the 3 column, its when you want it to extend depending on content, it becomes a bit more complicated.

<style type="text/css">#outer {min-width:800px; height: 800px; margin:15px 0; padding:0 200px;}#left, #right, #middle {height:100%;}  #left {background: url(left.png) no-repeat;  float:left; width:15px;}#right {background: url(right.png) no-repeat; float:right; width:15px;}#middle {background: url(middle.png) repeat-x; margin:0 15px; padding:5px 0;}</style><div id="outer"><div id="left"></div><div id="right"></div><div id="middle"><p>So let me get me this right!</p><p>image will be a fixed height, width will be minimum width of 800px (overall), but will extend depending on resolution of user screen.</p><p>if this does not extend heightwise then a 3 column div will work because you set the height of all the 3 column, its when you want it to extend depending on content, it becomes a bit more complicated.</p></div></div>