body {background: url(image.png)} won't center or adapt to navigator size?

Question

So I have a basic school project and a samll bug is really annoying me... been at it for a few hours nows..

I need a background that looks like this:

It is specified that I must add the background image to my body element, so here is what I did in my CSS stylesheet:

body {
background: no-repeat url(background.jpg);
background-position: center center;
background-color: #f2f2f2; }

All the other rules you see were specified by the teacher. Here is what it gives on Firefox:

First off it's too large for the navigator compared to the background image in the teachers example. Second it isn't centered..

Any kind of help would be much appreciated:)

Answer 1

I Think what is missing is:

 body { background: no-repeat url(background.jpg); background-size: cover; background-attachment: fixed; background-position: center center; background-color: #f2f2f2; }

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed. and the background-size property specifies the size of the background images, cover Resize the background image to cover the entire container.