CSS Background horizontal centering

Question

I have an image as background with the following CSS setup

#background {
  background-image: url('../img/bgimage.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  opacity: 0.8;
  filter:alpha(opacity=80);
  top:0;
}

My aim was to center the background ( add a little opacity ), but still have its beginning at the top of the page. Now when the monitor of the user is too large it looks like this

One can see that the image doesn't begin at the top. ( the grey colour is supposed to be a navbar later on but isn't interesting in this question ). The blue colour is part of the background and the white colour is obviously just a wildcard till the background begins to keep the center available. How is it possible to horizontally center the image so it still starts at the top of the page or how is it possible to resize image, so it fits to the users monitor size?

Answer 1

You can use background-size: cover; like explained here.

Answer 2

Simple one, add these:

background-position: center center;
background-size: cover;

More info at Perfect Full Page Background Image.

Answer 3

To have a background always cover the surface of its container, use

background-size: cover;