背景图像居中并调整大小

问题描述

| 我正在为一个客户的网站工作，在该网站上有一个背景图片，该图片将在页面上居中放置文本，链接等。 我目前已将图像调整为如下尺寸：

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

这使图像适合浏览器的高度，但将其向左对齐。我需要将它居中。 由于我需要它能够有条件地响应浏览器高度的变化，因此通常的居中技巧都行不通。 谢谢！     

解决方法

尝试删除\“ position：absolute \”并添加空白：0自动。例如：

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

    ,或者可以将其放置在表格ѭ2中，这样更易​​于管理，因为您以后可以毫不费力地向网页中添加更多项目，添加边框，更改表格颜色等。     ,我可以想到几种解决方法（未经测试，因此您可能需要进行调整）：

img.bg {
   position: absolute;
   /* Top and/or bottom for stretching it vertically as needed. Setting both will likely make it the size of the whole body,so beware. Remove bottom to keep it from doing that if necessary. */
   top: 0;
   bottom: 0;
   /* Left and/or right for sizing/positioning */
   left: 25%; /* Percentage position will make it adjust to browser window size,exact percent may need to be tweaked to get right and will depend on the image\'s size. */
}


img.bg {
   display: block;
   height: 100%;
   width: 500px; /* Whatever your desired width is. */
   margin: 0 auto; /* This should work as long as width is set. */
}

根据您的确切设计，这两种方法中的任何一种都应该起作用，并且可以响应浏览器窗口的大小。第二个可能是最灵活，最容易实现的，因为您不必摆弄位置。     ,答案取决于您所追求的。 如果您想在网站的背景中显示图片（我想您是在说），那么我不确定您使用的是哪种方法，但是如果您在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%;
}