Css 如何使背景图像不可拉伸？

在我的项目中，我使用以下属性设置了背景图像：

body {
  background-image: url("/");
  background-size: cover;
  background-repeat: no-repeat;
}

但是当某个页面上有很多元素时，这个图像会一直延伸并放大到底部，因此变得丑陋。如何做到不可拉伸？这样我就可以向下滚动，图像就会保持不变

下面是在CodePen上拉伸图像的效果。以下是片段：

正文{
背景图像：url（“http://www.planwallpaper.com/static/images/canberra_hero_image.jpg");
背景尺寸：封面；
背景重复：无重复；
}

某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素
某些元素

如果不希望背景图像拉伸，则不应在元素上设置

背景大小：封面。将背景大小设置为cover意味着背景图像将被缩放（拉伸）以适合容器元素的大小

以下是关于
背景尺寸：封面的说明：

尽可能放大图像并保持图像纵横比（图像不会被压扁）。图像“覆盖”容器的整个宽度或高度

如果您希望在向下滚动页面时背景图像保持不变，则应向元素添加
背景附件：fixed
。这将使图像保持原位

下面代码段中的
背景位置：50%50%
是一个可选设置，仅用于将背景图像定位在中间位置。如果不需要这样的定位，可以避免这种情况。默认情况下，图像将定位在左上角


正文{
背景图像：url（“http://lorempixel.com/850/420/nature/1");
背景位置：50%50%；
背景附件：固定；
背景尺寸：封面；
背景重复：无重复；
}
div{
高度：100px；
}
Lorem Ipsum door Sit Amet。。。。。。
我爱你，我爱你。。。。。。
我爱你，我爱你。。。。。。
我爱你，我爱你。。。。。。
我爱你，我爱你。。。。。。
我爱你，我爱你。。。。。。
我爱你，我爱你。。。。。。
Lorem Ipsum Dolor Sit Amet……
请给出一个完整的示例。也许您想要
背景尺寸：包含
，也许您想要
背景附件：固定的
或者两者都要？这很难说，因为您明确要求通过设置
背景大小：cover
@ulrichswarz查看图像放大的方式来获得行为。我包括了一个很好的答案！但是，如果图像对于屏幕来说太大，我需要它来适应整个屏幕的宽度和高度，我该怎么办？你是说缩小以适应吗？让我想一想。当我不使用
cover
属性时，它无法适应屏幕宽度。好吧，这听起来有点棘手，因为
cover
总是会根据大小进行缩放，因此会对较小的图像造成问题，而避免使用它不会缩小较大的图像。您是否正在尝试编写类似于模板CSS的东西来处理任何大小的图像？也许您知道一些能够按比例调整图像大小的服务？