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

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 :)

CodePudding user response：

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.