在CSS中，我们可以使用background-size属性来控制背景图片的大小。当我们将其设置为100%时，就会出现背景图片拉伸的情况，导致图片失真。但是如果我们想要保持图片的原始比例，又不希望出现重复的情况怎么办呢？
background-size: contain;
使用上述代码，背景图片将会自动调整大小，但是保持原始比例不拉伸，同时也能避免出现重复的情况。
如果我们希望背景图片覆盖整个容器，又不想出现拉伸或重复的情况，可以使用以下代码：
background-size: cover; background-position: center; background-repeat: no-repeat;
使用上述代码，背景图片将会自动大小适应，并且不会出现重复的情况，而且背景图片也将会自动居中。
此外，我们也可以使用background-attachment属性来设置背景图片的滚动方式，有以下两种：
background-attachment: fixed; background-attachment: scroll;
使用fixed，背景图片将会固定在容器中，不随着滚动条的移动而移动。使用scroll，背景图片将会跟随滚动条一起滚动。
最后，我们需要注意：虽然使用contain或cover可以让背景图片保持原始比例且不拉伸，并且可以避免出现重复的情况，但是如果我们使用的是小尺寸的图片，会出现像素模糊等画质问题，因此最好选择高清晰度的图片。
