Color
The color keyword is quite simple. It changes the font color of everything in the tag that it is applied to. Note that applying it to the body tag makes ALL of the font on the page that color, unless told to be a different color by a "lower level" tag. Basically, the closest tag to the text recieves that tag's values if there is a conflict. Remember, the declarations belong either on an imported stylesheet or inbetween style tags in the header! Example:
body {color:green}
p {color:orange}
font {color:#32d720}
<body>
This text will be green
<p>This text will be orange.
However,<font>This text is whatever #32d720 is!</font>
Just assume that the styles were declared properly (i.e., in a different file or inbetween style tags in the header). This is how they would work with eachother. Text that only recieves the color keyword from the body tag takes it's color. Text that was in p tags takes it's color, because the p tag is closer to the text than the body tag. Lastly, the text in the font tag get it's color, because again, it's the closest to the text.
background-color
This defines the background color of a given element. Most of the time this goes in the body tag, which changes the background color of the whole page. However, it can be applied to just about any other tag and it'll only change the background color of that given element. In the case of text tags, such as the p and font tags, it'll form a rectangular area of "color change" around the text. Like so:
<p style="background-color:red">Hello! The background around this text is red, but <font style="background-color:blue">This</font> text had a blue background!
If that was hard to read just highlight the text with your cursor. Ain't it cool?
background-image
This works just like the background-color keyword, except it puts an image there instead! Applying this to the body tag makes the whole page have the image. It accepts the url function - url(image_url). However, there's more to the story. When using the background-image keyword, you can also use three other keywords to modify it. Background-repeat, background-attachment, and background-position.
Background-repeat takes four values: repeat, repeat-x,repeat-y, and no-repeat. Repeat makes the image tile both horizontally and vertically, like the stars on the background of this page. The value repeat-y makes the image tile only vertically, or from top to bottom. Repeat-x makes it tile horizontally, or from left to right.
Background-attachment takes two values: fixed and scroll. Fixed makes the background act like my background - the page scrolls but the background stays in the same position. Try it! Scroll makes the background scroll with the rest of the page, just like they normally do.
Lastly, background-position takes a number of different values. It takes values in pairs of two - horizontal(left to right) position and then verticle(top to bottom) position. It accepts top, bottom, left, right, and center. Center works for bot the horizontal and verticle positioning depending on where you put it. If you put it first it centers it horizontally, and second positions it vertically. So background-position:left top would put the image in the top left corner. Background-position:center top would put the image in the horizontal center of the element and the verticle top of it. This also works with background-repeat. It just spans the tiles out from the original image. It also takes length and percentage values. When they're used, they start from the top left corner of the window, so background-position:50px 50px will put the image 50 pixels from the top corner and 50 pixels from the left corner.
I would give examples of these, but that would entail me making little images and then doing all manner of things, so I'll just leave it to you to fully explore.