Question

因此我有背景，宽度为1920px，当分辨率小于1920x1080（1200）时，我试图将其居中。

此时图像显示，但它不在屏幕中央。

我的代码：

header {
  background-image: url("images/header.jpg") ;
  background-color: #000;
  height: 306px;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
}

Answer 1

关于 background-position

的链接

header {
  background-image: url("images/header.jpg") ;
  background-color: #000;
  height: 306px;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position:center; //add
}

Answer 2

如果您需要裁剪背景，请使用

background-position: top center

这将确保背景沿x轴居中对齐，并沿y轴进行顶部对齐

Answer 3

试试这个：

 html { 
  background: url(images/#.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

居中的背景

3 个答案: