使用css全屏显示背景图像答案

【问题标题】：Background img in full screen with css使用css全屏显示背景图像
【发布时间】：2015-04-13 08:23:33
【问题描述】：

我正在尝试让<div id="grid" wicket:id="grid"> 成为全屏图像。

谁能告诉我我做错了什么？

HTML：

<html>
<head>
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>

</head>
<body>
<div id="grid" wicket:id="grid" >

</div>
</body>
</html>

Java：

WebMarkupContainer grid = new WebMarkupContainer("grid");
grid.add(new SimpleAttributeModifier("style", "width:100%; height:100%;background:url(partimages/" + imageName + ") no-repeat;"));
add(grid);

【问题讨论】：

您使用 java 添加样式的任何原因？
我对使用 wicket 进行开发非常陌生，对于这种情况，我从数据库中获取图像名称，并且可以根据用户在 url 上设置的参数进行更改，这是我找到的唯一解决方案对于检票口，谢谢
啊好的，确保html 和body 的高度也设置为100%，否则网格不会占用任何高度。您可能也应该更新您的 jQuery 版本 - 1.4 已经很旧了，如果您仍然需要 ie8 支持，我们现在使用 v2+ 或 1.11
Jquery 1.4 是项目标准，因此无法更改。我刚刚更改了 html，body height:100% 但它显示了很大一部分图像，而不是全屏显示的所有图像。
另外请记住，Wicket（使用 ajax 时）也会将 jQuery 贡献给标题

标签： html css background wicket

【解决方案1】：

你的DIV没有屏幕（body）那么高，你的背景限制在DIV的大小

一种解决方案是在 HTML 和 BODY 上设置 100% 的高度，正如 Pete 在他的评论中所建议的那样。

请参阅此问题了解更多详情：Make div 100% height of browser window

【讨论】：

【解决方案2】：

你试过“掩护”吗？ w3c example

background-size:cover;

【讨论】：

当我只设置 background-size:cover;如果我将其设置为宽度：100%，它会显示一个空屏幕；高度：100%；只是在全屏上设置img的一部分，而不是设置所有img。 @Athair