Real background image?

I’ve been running full speed through web design with bungie cords around my legs to make a very simple page for my company. My method of editing css has been mostly guess and check so far.

I am trying to change the background from blue to an image. Red arrows pointing at the problem area here: http://i.imgur.com/TXhRCVA.jpg

I’ve been able to get the image to show up in my header by adding
background-image: url(images/Blue.jpg);
under #header

and added the same line under .main-container {
to get the image to show up in a small area around the grey-ness.

***TL;DR this is what I need to accomplish***
I can’t figure out where else to add the background image line to replace the solid blue on both sides.
***TL;DR this is what I need to accomplish***

I’m aware that I can change the background image and color in theme options, but the catch is I plan to allow the user to use a theme selector. I have duplicated the point theme folder in \wp-content\themes\ and renamed each to Blue, Black, Green, Red, etc. and changed the top line of style.css to match. When I pick a background image in theme options it is the same image across all themes.