如何在窗口大小调整时居中背景图片

Question

我正在尝试使用CSS的background-image和position属性在主页中放置一张图片，以更改其偏移量。

问题是，当我调整浏览器的大小时，图片将保持静态且不会相应地移动。

有什么方法可以实现这一点吗？

谢谢。

- Himberjack

---

你能贴一些代码吗？这个background-image所属的元素是否相对于浏览器大小？ - Nachshon Schwartz

可能是重复的问题：如何将背景图像居中到其父元素？ - Matt Ball

Answer 1

使用百分比：background-position: 50% 50% 将使背景图片居中显示。

- GolezTrol

---

看起来还行，但不够好，因为我需要将中心固定。也就是说，在那个背景图像上方我有文本...我需要将图像放在文本后面的特定位置。 - Himberjack

Answer 2

有几种方法可以做到这一点：

background: url(../images/bodyBG2.gif) center center no-repeat;

或者

background: url(../images/bodyBG2.gif) 50% 50% no-repeat;

或者

background-image: url(../images/bodyBG2.gif);
background-repeat: no-repeat;
background-position: 50% 50%;

如果您需要将背景垂直定位到某个点（例如距离页面顶部150像素），请更改代码：

background: url(../images/bodyBG2.gif) 50% 150px no-repeat;

- Arsen K.