为什么我的背景图像仅在添加背景重复时才会拉伸：重复 y？答案

【问题标题】：Why does my background-image stretch only when adding background-repeat: repeat y?为什么我的背景图像仅在添加背景重复时才会拉伸：重复 y？
【发布时间】：2020-09-02 00:19:05
【问题描述】：

我试图让背景图片覆盖页面的垂直长度。当我添加 background-repeat: repeat-y;图像拉伸。当我有背景重复时：不重复；它没有伸展。这里发生了什么？我不想让它伸展，我只想让它重复直到页面底部。

这是 CSS：

  .backgroundTest{
  background-color:white;
  background-image:url(../images/sideBanner.jpg);
  position:absolute;
  background-size:175px 100%; /* I need this, otherwise the background image is too big */
  background-repeat: repeat-y;
}

主要问题是我想要一个沿页面左侧的图像（宽度 175 像素），所有内容都在该图像的右侧。我会采取任何解决方案！

【问题讨论】：

标签： html css image background-image repeat

【解决方案1】：

使用表格，您可以在一列中添加内容，在另一列中添加图像。您可以相应地设置图像的宽度

【讨论】：

但是图像并没有覆盖页面的长度，因为我不能以这种方式重复......并且由于我的代码的响应性，在移动设备中它只会去在其余内容之上。

【解决方案2】：

试试这个，

 background-size: 100% auto;

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。

【解决方案3】：

我会将图像包装在 <div> 中，并使用带有以下两个值之一的 background-size CSS 属性：

contain

在不裁剪或拉伸图像的情况下尽可能大地缩放图像。

cover

在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会将其垂直或水平裁剪，以便不留空白。

例如

.wrapper-container {
    position: relative;
    height: 100%;
    width: 175px;
}

.backgroundTest {
    background-image: url("../images/sideBanner.jpg");
    background-repeat: repeat-y;
    background-size: contain;
    background-color: white;
    position: absolute;
}

【讨论】：