如何自动增加背景大小

Question

如何动态地将新项目添加到其页面时自动增加背景大小。

#container1 {
    background-image: url(wallpapers.jpg);
    height: auto;
}
#mid {
    background-image: url(scripts/white.png);
    width: 950px;
    margin-left: 210px;
    height: 1700px;
}

HTML

<div id="container1">
    <div id="mid">content goes here</div>
</div>

我无法将背景尺寸增加到超出定义的高度，即使我将其定义为自动无法在添加新项目时自动增加尺寸。

请帮助我为我的大学项目提供帮助。

提前感谢您等待回复。

Answer 1

使用background-size属性。它可能对你有帮助。

#container1 {
    background-image: url(wallpapers.jpg);
    height: auto;
    background-size: 100% auto;
}

Answer 2

我认为如果没有确定高度和宽度的样式的div将根据div中的元素增长和缩小。

Answer 3

div #container占用其子元素的高度，即#mid，在这种情况下，其高度为1700px。因此，您的内容会从div元素（#mid）中溢出。 您可以从#mid中删除height属性，也可以使用overflow-y: scroll;。

Answer 4

将此值添加background-size: auto 100%;到css

中的#container1 div