Is it possible for me to get this image

http://i9.photobucket.com/albums/a100/JDiva/mmbg0ft.jpg

to repeat underneath my background, so the background continues?

http://kristal.bravehost.com/

And also do you think divs or tables would be better for my website?

Here is my external css.

A:link
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:visited
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:active
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:hover
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000;

(Warning: the following cursor attribute is for those who use IE only!)

cursor: value; [default, auto, wait, crosshair, hand, help, text, move, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize]
cursor: url('yourdomain.com/cursor.ani');}

h1 {font-family: value; [your font name for headers (arial, verdana, etc.)]
color: value; [your font color (#000000)] }

p {font-family: value; [your font name for paragraphs (arial, verdana, etc.)]
color: value; [your font color (#000000)] }

body
{ background: #7D5A7B;
background-image: url(http://kristal.bravehost.com/mmlayout8vr.jpg);
background-repeat: no-repeat;
background-position: 0% 125px;
background-attachment: fixed;

font-family: value; [your font name]
color: #000000 ;
letter-spacing: value; [any number value (3pt, 5pt)]
font-weight: value; [lighter, normal, bold, bolder, any number value (100, 500, 900)]
font-size: value; [xx-small, x-small, small, medium, large, x-large, xx-large,
any number value (12 pt, 18 pt)]

direction:rtl; [this reverses the entire site so the scrollbar is on the left]

(Warning: the following scrollbar attribute is for those who use IE only!)

scrollbar-face-color : #FFFFFF;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #FFFFFF;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #FFFFFF;

margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}

td
{ font-family: value; [your font name]
color: #000000;
padding-left: value; [2cm, 4cm etc.]
padding-right: value; [2cm]
padding-top: value; [2cm]
padding-bottom: value; [2cm]
padding: value; [2cm this is for all four sides]
padding: value value; [2cm, 4cm : two values for four sides, add numerical value] }

input, textarea
{ background: #000000 url(yourimage.gif);
font-family: value; [your font name]
color: #000000;
border-style: value; [dotted, dashed, solid, double, groove, ridge, inset, outset]
border-color: #000000;
border-width: valuepx; [numerical value, 5, 6, 8...] }

You can't have 2 background images. You would have to set that image as the background, and the one you currently have on there would have to be just a regular image on the page.

You can also narrow your CSS down to just this part
body
{ background: #7D5A7B;
background-image: url(http://kristal.bravehost.com/mmlayout8vr.jpg);
background-repeat: no-repeat;
background-position: 0% 125px;
background-attachment: fixed;

color: #000000 ;

scrollbar-face-color : #FFFFFF;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #FFFFFF;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #FFFFFF;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #FFFFFF;

margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}

If you decide you're going to use other attributes then just add them in