The header at the top of the page that has the 3 different color boxes and the name of the site, how can i replace that with my own picture??

the three color boxes are the logo image (see ATO->Style & edit HEADER AREA->Show Logo Image?)
You can put the two pictures together, put it in the atahualpa/images/header' folder (remove the other images) then remove the '%logo' from ATO->Style & edit HEADER AREA->Configure Header Area and add '%image' there instead.

I did the steps above but to test it i only put one of the images in the header folder and all it shows is a thick black line. i was able to show the background image and it was able to show the whole image. Removing the %logo also removes the comments and rss feeds which i like, so i added %logo back.

you only defined your header image height to be 10 pixels - see ATO->Header Image->Header Image: Height - so all you are seeing it the top 10 pixels of the image