为什么我的背景图像仅在添加背景重复时拉伸:重复 y?

Question

我正在尝试让背景图像覆盖页面的垂直长度。当我添加背景重复时：重复 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 px(的图像，所有内容都在这个图像的右侧。我会采取任何解决方案！

Answer 1

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

Answer 2

试试这个，

background-size: 100% auto;

Answer 3

我会将图像包装在<div>中，并将background-sizeCSS 属性与以下两个值之一一起使用：

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;
}