Question

I’ve got three images that I’m trying to use for a box like this in my website:

http://imageshack.us/photo/my-images/41/examplemg.png/

I am trying to do this with CSS and HTML but I have had no success on my own and have not found any article speaking on how to do this particularly.

I basically want it so that the mid_image repeats when I add content.

Answer 1

To repeat a background-image, you set the CSS background-repeat attribute. In your case you should set it to repeat-y.

Something like this should do it:

HTML:

<div id="top"></div>
<div id="middle">Content here</div>
<div id="bottom"></div>

CSS:

#top {
   background-image: url("sometopimage.png");
}
#middle {
   background-image: url("somemiddleimagetorepeat.png");
   background-repeat: repeat-y;
}
#bottom {
   background-image: url("somebottomimage.png");
}

Note Omitted size attributes in the example, since we don’t have any measures on your layout. You will however need to add width and height to your elements, to fit your layout.