使用 CSS 在现有内容后面的网页上显示背景图像 - Displaying a background image on webpage behind existing content with CSS

Displaying a background image on webpage behind existing content with CSS

嗨，我有一个用PHP和CSS开发的系统。

我希望有覆盖每个页面全屏的背景图像。但是，使用我现有的设置，图像会覆盖屏幕上的其他内容。我最初在我的主页上尝试过这个。我在 php 文件中的第 19 行创建了一个 img 标签（学习），如图所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome - <?php echo $userRow['username']; ?></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
 <div id="left">
    <label>NHSCT E-Learning Portal</label>
    </div>
    <div id="right">
     <div id="content">
         Welcome <?php echo $userRow['forename']; ?>&nbsp;<a href="logout.php?logout">Sign Out</a>
        </div>
    </div>
</div>
<img src="images/Learning.jpg" id= "Learning" alt="">
<br>
<p align="center"><img src="title.jpeg" width="400"height="100" alt="title.jpeg">
<br>
<center>
<h1> Select an E-Learning Module<h1>
<br>
<table align="center" height="200" width="40%" border="0">
<tr>
<td><button name="Surface" onclick="window.location.href='SurfaceExecute.php'">Surface Pro Basic Skills</button></td>
</tr>
<td><button name="eNISAT" onclick="window.location.href='eNISATExecute.php'">eNISAT Tutorials</button></td>
</tr>
<td><button name="Email" onclick="window.location.href='EmailExecute.php'">Email Tutorials</button></td>
</tr>
<td><button name="Policies" onclick="window.location.href='Policyview.php'">Policies and Procedures</button></td>
</tr>
</table>
</body>
</html>

然后，我将以下 CSS 添加到我的样式.css文件中

/* css for home page  */
#Learning {
  position: fixed; 
  top: -20; 
  left: 0; 
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

我的问题是，如何在背景中显示此图像，并在顶部显示现有屏幕内容？或者有没有办法使背景图像不透明，以便可以通过它看到其他内容并单击？

从提供的答案中找到更新解决方案。从 php 文件中删除了 img 标签并将 CSS 更新为以下内容

html { 
  background: url(images/Learning.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

您将在 CSS 中使用背景图像属性。如果你对整个页面这样做，你不妨在 body 元素上使用它：

body {
   background-image : ........;
}