background-position-x: center;
background-position-y: center;

background-position-x: center;
background-position-y: center;

选择:

background-size: auto 100%;

试试下面的方法，

background-size: contain;
background-size: cover;
background-size: 100%;

.container{
    background-size: 100%;
}

background-size属性指定背景图像的大小。

这个属性可以使用不同的语法:关键字语法("auto"， "cover"和"contain")，单值语法(设置图像的宽度(高度变为"auto")，双值语法(第一个值:图像的宽度，第二个值:高度)。

百分比-设置背景图像的宽度和高度占父元素的百分比。 cover -调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或切掉一点边缘 调整背景图像的大小，以确保图像是完全可见的

更多信息请访问:https://www.w3schools.com/cssref/css3_pr_background-size.asp

你也可以试试这个，设置背景大小为封面，为了让它看起来更好，还可以设置背景位置中心，如下所示:

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

你可以使用这些属性:

background-size: contain;
background-repeat: no-repeat;

然后你的代码是这样的:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">