居中較大的背景圖像

Question

我一直在嘗試找到一種僅使用HTML和CSS將w:3000 xh:900px圖像作為主體背景圖像w:3000 xh: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%;
}

這是一個jsFiddle來演示

希望這可以幫助！ 如果您有任何疑問，請告訴我。