Html 如何使我的'；居中：在'之后；背景图像？

我有一个背景图像，它覆盖了浏览器的整个宽度和高度。在较小的屏幕上打开html文件时，只有图像的左侧可见

我想要的是在背景上缩放图像并使其居中。我必须在css代码中更改什么

div#background-content {
    position: relative;
}

div#background-content:after {
    background-image:url('./images/sunrise.jpg');
    opacity:0.7;
    width: 100%;
    height: 100%;
    background-size:cover;
    display:block;
    content : "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

CSS:

---

背景位置：中间
添加背景位置：中间；
我建议您使用
background:url（'./images/sunrise.jpg'）无重复中心
您可以在css中添加此代码：

 div#background-content:after {
    background-size:contain;
    background-position:center;
    }

}

div#background-content:after{
   background-position: 50% 50%;
   background-size: cover;
   background-repeat: no-repeat;
}

div#background-content:after {
background-image:url('./images/sunrise.jpg');
opacity:0.7;
width: 100%;
height: 100%;
background-position: left -206px top -95px !important;
background-size: 320% 110% !important;
display:block;
content : "";
position: absolute;
top: 0;
left: 0;
z-index: -1;