如何使我的网站背景填满CSS的屏幕

Question

我在我的网站上制作了两个表单，两个表单都被一个<div class="wrapper">标记包围。我使用CSS为此添加背景图像。

.wrapper {
    background-image: url(../images/backgrounds/desktop.jpg);
    background-size: 100%;
    background-position: top;
    width: 100%;
    height: 100%;
    min-width: 950px;
}

但是，这就是该网站的实际情况。我无法扩展图像的底部以填满屏幕。我无法弄清楚它为什么要这样做。

Answer 1

div的高度是100％的什么？如果它是身体的直接孩子，默认情况下身体不会包裹100％的屏幕。所以你必须使身体100％，然后包装也将采取100％的身体。如果有更多父元素，则所有父元素也应该具有样式html,body{ height:100%; } ：

background-size:cover

同时添加<Route path={"/base/a"} exact={true} render={() => <ComponentBase tab="a" />} /> 以确保图像足够覆盖整个屏幕。

Answer 2

添加.wrapper { background-image: url(../images/backgrounds/desktop.jpg); background-size: 100%; background-position: top; background-size:cover; width: 100%; height: 100vh; min-width: 950px; } 以使背景覆盖整个div。您的背景仅显示其中包含的内容。您需要更改容器的高度或填充和/或添加更多内容以查看整个背景。

item2 = pd.read_sql("""
SELECT * from [dbo].[ITEM]
where item_age3 IN ({})
""".format(','.join('?'*len(df1.age3))), conn, 
params=list(df1.age3))

Answer 3

我的解决方案是将<div class="wrapper">的高度设置为100vh。

.wrapper {
    height: 100vh;
}

这将分隔线的高度设置为窗口视图高度的100％。在它达到表格高度的100％之前。

Answer 4

尝试替换

background-image: url(../images/backgrounds/desktop.jpg);

与

background:url(../images/backgrounds/desktop.jpg) no-repeat scroll;