<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: orangered;
}
.box {
/*显示比屏幕大的图片：缩放尺寸*/
/*background-image: url("img/kj.gif");*/
/*尽量只设置宽，高等比缩放，不失真*/
/*background-size: 300px 300px;*/
}
.box {
/*显示比屏幕小的图片：处理平铺与位置*/
background-image: url("img/lss.jpg");
/*平铺: repeat-x repeat-y repeat no-repeat*/
background-repeat: no-repeat;
/*位置*/
/*1.只设置x轴，y轴默认center*/
/*2.x轴：left center right 具体像素 百分百*/
/*2.y轴：top center bottom 具体像素 百分百*/
background-position: center center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>原文：https://www.cnblogs.com/bladecheng/p/11284509.html