Search code examples
htmlcssfirefoxbackgroundpositioning

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

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: enter image description here

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: enter image description here

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

Solution

  • 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.