Question

我有一个交互式网页。

body元素具有背景图像。一旦在页面上添加了新元素，图像就会拉伸，我不希望这种行为。

如何解决此问题。

<style>
     body {
         background-image : url(./image.jpg);
         background-size: cover;
     }
</style>

<body>
      <section>
            ... dynamic elements
      </section>
</body>

Answer 1

从css中删除background-size: cover;，因为cover属性将覆盖整个容器，即使它必须拉伸图像或从边缘之一上切掉一点。因此，请尝试将背景尺寸设置为cover或px，而不是%。

如果您想水平拉伸而不是垂直拉伸，请尝试以下代码

background-size: 100% 50%;

例如：-background-size:width(px or % or vw) height(px or % or vh)

Answer 2

在正文样式中添加background-repeat: no-repeat;。

CSS问题与背景图片

2 个答案: