2 questions: background image won't appear and I am using absolute positioning, any way to get around having large margin?

Hello, and thanks in advance for any suggestions.

The first problem is that I can't get the background image to appear. I've tried several combinations of changing the url line, but I'm not sure what I'm doing wrong. The image is located in the same root folder as both my css and html files. Any suggestions?

Second, I am not sure what to do about absolute/relative or float positioning. I initially tried using float positioning, but could not get overlapping boxes as I would like, so I changed to using absolute positioning with 760px width. Now, on larger screens it just looks like a bunch of space on the right. Is there any way to just center the whole thing no matter the screen size, I guess like centering the wrapper horizontally on the page - like the way yahoo looks? Thanks for any suggestions.

The page is located at ballersblock.com

Here is the html

Baller's Block

Future



• Life
  
• Employment
  
• Starting a Business
  
• Education

Family



• Prenuptial Agreements
  
• Marriage
  
• Planning for Children
  
• Child Support/Custody
  
• Divorce
  
• Caring for Parents

Welcome to the Block



• Cars
  
• Travel
  
• Jewelry
  
• Treasure

Finances



• Saving and Budgeting
  
• Investing
  
• Life/Health Insurance
  
• Trust Funds
  
• Retirement
  
• Wealth Preservation
  

Find a Lawyer



• Lawyer Lookup

Here is the CSS

a{
color: rgb(0,50,50);
}
a:hover {
color: red;
}
a:visited{
color: rgb(0,50,50);
}

ul{
text-align: center;
font-size: 1 em;
background-color: #ccc;
margin: 5px;
padding: 5px;
border-style: solid;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: rgb(0,150,150);
}

body{
background-image: url(awesomesunset.jpg);
}

#wrapper{
width: 760px;
}
h1{
font-style: neuropol;
font-size: 25px;
text-transform: uppercase;
font-weight: bold;
line-height: 26px;
}
h2{
font-style: arial narrow;
font-size: 10px;
line-height: 11px;
}
h3{
font-style: fantasy;
font-size: 7.5px;
line-height: 6px;
font-style: italic;
font-weight: lighter;
}
h4{
text-align: center;
border-style: solid;
border-width: 1px;
border-left-width: 5px;
border-right-width: 5px;
border-color: rgb(0,150,150);
}
#banner{
color: rgb(0,50,50);
font-family: arial, helvetica, sans-serif;
height: 90px;
width: 760px;
text-align: center;
background-color: #ccc;
border-style: solid;
border-width: 2px;
border-left-width: 10px;
border-right-width: 10px;
border-color: rgb(0,150,150);
}
.future{
position: absolute;
top: 210px;
left: 110px;
width: 180px;
}
.family{
position: absolute;
top: 165px;
left: 470px;
width:180px;
}
.ballersblock{
border-width: 3px;
text-align: center;
position: absolute;
left: 290px;
top: 310px;
width: 180px;
}
.finances{
position: absolute;
left: 110px;
top: 410px;
width: 180px;
}
.lawyer{
position: absolute;
left: 470px;
top: 410px;
width: 180px;
}

#footer{

}

I've already checked out htmldog, which was VERY helpful, but I still couldn't figure these things out!