Html 图像的高度取决于文本

我想做的是根据文本的数量改变背景图像的高度

例如，图像高度为100px，该div中的文本为150px。如何根据输入的文本量将图像高度扩展到150px（或更高）

HTML:

---

您可以在

中使用
背景尺寸：cover
。滚动bg img

CSS。然而，并非所有浏览器都支持这一点。只要查一下，看看是怎么回事

编辑：

像这样更新背景属性，看看这对你有什么好处

background-repeat: no-repeat;
background-size: 100% 100%;

将导致背景拉伸以适合容器，但只要您在

上设置了显式的
高度
和
宽度
。滚动bg img

---

如果删除这些内容，并将其大小调整到文本的高度，则背景图像将拉伸到合适的位置。

这似乎将背景图像搞砸了。如果我添加该属性，它的右半部分将被切断。@ShadyPotato已更新。试试看。

.scroll-bg {
    width: 810px;
    float: right;
}

.scroll-content {
    width: 765px;
    margin-left: 15px;
    word-wrap: break-word;
}

.scroll-bg-img {
    background-image: url(img/scroll_bg.gif);
    background-repeat: repeat-y;
    z-index: 1;
    width: 795px; 
    height: 1000px;
    margin-top: 40px; 
    margin-left: 7px;
    padding-top: 15px;
}

.scroll-bg-image {
    background-image : url("img/scroll_bg.gif");
    background-position : center center;
    background-repeat : no-repeat;
    background-size : cover;
}

background-repeat: no-repeat;
background-size: 100% 100%;