Clever Geek Handbook

CSS Background Horizontal Center

I have an image as a background with the following CSS setting

#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 goal was to center the background (add a bit of opacity), but still start at the top of the page. Now when the user's monitor is too big it looks like

enter image description here

You can see that the image does not start at the top. (gray should be a navigator later, but not interesting in this question). Blue is part of the background, and white is obviously a wildcard until the background maintains the center. How can the image be horizontally centered so that it still starts at the top of the page, or how can the image be resized to fit the user's monitor?

+3


source to share


3 answers


You can use background-size: cover;

as described here .



+4


source


Simple, add the following:

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


More info at Perfect Full Page Background Image .

+3


source


To make the background always cover the surface of its container, use

background-size: cover;
+3


source






More articles:


All Articles