CSS和不同大小的显示器？

Question

我正在做一个网站（WIP）。我遇到了一些CSS问题，希望你们能帮助我。

我目前的情况：

• 我有图片，让我们称它为“bg.png”，宽度约为2500px，背景图片的中心有我的标识。
• 我的网站应定位所有尺寸（从小型800 x 600到2400 x XXX）用户。

我的问题：

• 如何集中背景图片（bg.png），以便徽标始终位于不同尺寸的显示器屏幕的居中（水平）位置？

Answer 1

body { background: url('bg.png') 50% 50% no-repeat; }

这会将图片放在页面中心的全尺寸位置，用户将在浏览器窗口允许的范围内看到此背景图片的大小。

Answer 2

如果它只是一个徽标文件，你可以使用

<style>
img
{
    position:absolute;
    left:-50%;
    top:-50%;
    z-index:-1;
}
</style>

Answer 3

#your_img {
  width: 2500px; //In example 2500px
  margin: 50%;
  padding: -1250px; // 2500 divided by 2
}

它可能无法在Internet Explorer上运行，但您可以使用位置：绝对的小黑客，如上所述

Answer 4

#your_img {

   position: absolute;
   left: 50%;
   margin: -1250px;
}

当你将img元素放到另一个盒子上时，这个解决方案是必要的。但要小心 - 它可能会改变父母盒子的大小。