Question

我一直试图找到一种方法，只使用HTML和CSS将w:3000 x h:900px图像作为身体背景图像居中。

我试过了：

html, body{
    width:3000;
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    background-image: url('http://placehold.it/3000x900');
    background-repeat:no-repeat;
}

但它没有用，我也尝试过：

放置height:auto;
添加height:900px;
用width:100%

但其中没有一个有效。

然后我尝试创建一个具有相同背景图像的div，并给它margin:0 auto;，如下所示：

#bg {
    width:2000px;
    height:900px;
    margin:0 auto;
    padding:0;
    position:relative;
    background-image: url('http://placehold.it/3000x900');
    background-repeat:no-repeat;
    overflow:hidden;
}

......但仍然无效。

我不需要它来调整大小，我只需要它在屏幕上居中并且overflow-x:hidded;因为我不希望水平滚动显示在底部。

Answer 1

这可以使用background-position样式：

来完成

html, body {
    width:3000; /* This style doesn't do anything, did you make a typo? */
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    background-image: bgimage;
    background-repeat:no-repeat;
    background-position:50% 50%;
}

Here's a jsFiddle to demonstrate

希望这有帮助！如果您有任何问题，请告诉我。

中心更大的背景图像

1 个答案: