Html 背景图像居中并调整大小

我正在为一个客户开发一个网站，在这个网站上有一个背景图像，它将以页面为中心，覆盖文本、链接等

我目前已按如下方式调整图像大小：

img.bg
   {
   height:100%;
   position:absolute;
   }

这将使图像适合浏览器的高度，但会使其向左对齐。我需要它居中

因为我需要它有条件地响应浏览器的高度变化，所以通常的居中技巧不起作用

谢谢

尝试删除“位置：绝对”并添加边距：0自动。例如：

img.bg
{
   height:100%;
   margin: 0 auto;
}

---

或者只需将其放在一张表中即可

“image goes here”

更易于管理，因为您可以在将来毫不费力地向网页添加更多项目、添加边框、更改表格颜色等。

我可以想出两种方法（未经测试，因此您可能需要调整）：

---

根据您的具体设计，这两个选项中的任何一个都可以工作，并对浏览器窗口的大小做出响应。第二种方法可能是最灵活、最容易实现的方法，因为你不必摆弄定位。

答案完全取决于你想要什么

如果你想在网站的背景中显示一幅图像（我想你是这么说的），那么我不确定你在使用什么方法，但是如果你在html和css中去掉

img.bg{}

，只需将以下内容放入css中，你就会得到你想要的

body{
    background-image:url('background.gif'); // substitute background.gif for the correct file path
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-size:auto 100%;
}

---

当我这样做时，图像只是将自身大小调整回原来的巨大大小。

body{
    background-image:url('background.gif'); // substitute background.gif for the correct file path
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-size:auto 100%;
}