easy layout for graphic border in css? how to stop misaligned border graphics? -

CSS is not one of my strongest points! I'm trying to find a tutorial or something that will give me a premade div and css system if I have repeated head, left, bottom and right graphic, I think I'm just closing so close , But then something bad happens. I do not want to use the new CSS 3 implementation.

Edit: To be ambiguous, I just want to use an image in the form of a border. I have to repeat the graphics with the teeth, top, bottom, bottom right, and left and right and up and down. There is a graphic I thought the HTML tables were excluded, so I stayed away from them, but I still have problems aligning boundaries correctly. I have a slight difference in some way, and / or I can not force the boundary to repeat every x pixels so that the corner graphics line up with top / bottom and left / right graphics.

EDIT: I am very close, but still the ugly problems with the repeating graphic have not started or ended in the right place, and the background inside has a solid color behind the PGN transparency. . I will post whatever I am.

  & lt; Div id = "box" & gt; & Lt; Div id = "tl" & gt; Div id = "tr" & gt; Div id = "top" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "left" & gt; & Lt; Div id = "right" & gt; & Lt; Div id = "content" & gt; Exam text & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "bl"> gt; Id = "br" & gt; & Lt; Div id = "down" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

My CSS:

  #top {background: url (top.png) repeat-x; Width: 79%} # bottom {background: url (bottom) repetition - x; Height: 58px; Width: Auto; Margin-left: auto; Margin-right: auto, width: 79%;} # left {background: Url (left.png) repeat-y} #right {background: url (right.png) Repeat-y 100% 100%} #bl {Background : Url (corner4.png) 0 100% Repeat Any; Height: 55px; Margin-left: -6px;) #br (background: url (corner 3 page) 100% 100% non-rectitude; height: 55px;} #tl {background: url (corner 1 page) 0 no-repat ; Height: 55px;} #TR {background: url (corner 2 page) 100% 0 no-rit; height: 55px;}  

OK ... got it ... Well, is your container width fixed? If yes ....

• Create an image for the top that extends into the entire container of HTML Place the image as the first element in the form of a normal image inside your container.

• Create another image for the bottom that extends into the entire container. Place this image as a last element inside your container.

• Create a horizontal background image (1 pixel high) that extends across the entire container, and CSS repetition- Use y for any height container A side gives.

... Something like this will end with you:

  & lt; Div & gt; with background image & Lt; Top image & gt; & Lt; Your content & gt; & Lt; Image below & gt; & Lt; / Div & gt;