使用CSS居中背景圖像

我想居中背景圖像。有沒有使用DIV，這是CSS風格：使用CSS居中背景圖像

body{ 
    background-position:center; 
    background-image:url(../images/images2.jpg) no-repeat; 
}

以上CSS瓷磚一切都結束了呢中心，但一半的圖像是沒有看到，它只是一種向上移動。我想要做的是以圖像爲中心。我能採用圖片查看即使是21" 屏幕上？

來源

2010-04-15 X10nD

現在，這將取決於圖像的大小和瀏覽器的大小，不是嗎？ – 2010-04-15 07:26:40

@nikc +1，我知道，但需要知道是否有工作 – X10nD 2010-04-15 07:31:04

213

background-image: url(path-to-file/img.jpg); 
background-repeat:no-repeat; 
background-position: center center;

這應該工作。

如果不是，爲什麼不把與圖像和使用divz-index爲背景嗎？這會比背景圖像更容易居中。

除了那個嘗試：

background-position: 0 100px;/*use a pixel value that will center it*/或者我認爲你可以使用50％，如果你已經將你的身體min-height設置爲100％。

body{ 

    background-repeat:no-repeat; 
    background-position: center center; 
    background-image:url(../images/images2.jpg); 
    color:#FFF; 
    font-family:Arial, Helvetica, sans-serif; 
    min-height:100%; 
}

來源

2010-04-15 07:27:37 Kyle

它集中了，但只顯示了一半的屏幕，我希望stackoverflow有一個選項附加屏幕截圖 – X10nD 2010-04-15 07:32:22

你可以做一個截圖並上傳到你的服務器或免費像photobucket.com這樣的圖片託管網站，或者在www.jsfiddle.net上做一個臨時示例，併爲我們發佈鏈接。從你所說的話，圖像是1600x1200和大多數屏幕分辨率不會那麼高，嘗試調整您的圖像適合的大小。例如，我使用1440x900的寬屏顯示器。 – Kyle 2010-04-15 07:34:51

屏幕截圖 - http://imagevat.com/picview。php？ig = 6179 我不知道如何將圖像上傳到jsfiddle，如果你可以幫我在那裏 http://www.jsfiddle.net/yWrQP/ – X10nD 2010-04-15 07:52:02

嘗試

background-position: center center;

來源

2010-04-15 07:04:16

雙中心中心如何工作？無論如何它不能解決問題，仍然相同 – X10nD 2010-04-15 07:14:13

@Jean：看看規格，背景位置實際上可以實際取2個值（水平和垂直）。 http://www.w3.org/TR/CSS2/colors.html#propdef-background-position – 2010-04-15 07:18:57

@rob它不工作，圖像平鋪。圖像是1600x1200，我的屏幕尺寸是1280x800 – X10nD 2010-04-15 07:21:29

您的代碼出現錯誤。您在background-image屬性上使用了完整語法和速記符號的組合。這導致無重複被忽略，因爲它不是background-image屬性的有效值。

body{ 
    background-position:center; 
    background-image:url(../images/images2.jpg) no-repeat; 
}

應成爲執行下列操作之一：

body{ 
    background:url(../images/images2.jpg) center center no-repeat; 
}

或

body 
{ 
    background-image: url(path-to-file/img.jpg); 
    background-repeat:no-repeat; 
    background-position: center center; 
}

編輯：爲了您的形象 '縮放' 的問題，你可能想看看this question's answer。

來源

2010-04-15 07:42:10

'background：url（../ images/images2.jpg）center center no-repeat;'不起作用，因爲語法錯誤而其他人也不工作 – X10nD 2010-04-15 07:58:26

我用這個代碼，它的工作原理很好

html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    background: black url(back2.png) center center no-repeat;; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

來源

2012-12-18 17:49:48

謝謝！我甚至都不知道webkit有不同的聲明，等等...... – 2014-02-28 09:24:18

嘿，維克多，我用過你的代碼了很多，但現在看起來它不起作用。我添加了background-attachment：fixed;但它不適用於我的iPad瀏覽器... – Vadim 2015-11-22 19:09:37

試試這個background-position: center top;

這將這樣的伎倆爲您服務。

來源

2013-09-03 18:26:42 Magnus

我覺得this是什麼都想：

body 
{ 
    background-image:url('smiley.gif'); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:center; 
}

來源

2014-02-12 06:10:21 Crab

background-attachment修復了我的問題;） – kdoteu 2016-02-02 19:34:26

是的，這也適用於我。 – Hexodus 2016-02-29 10:39:47

background-repeat:no-repeat; 
background-position:center center;

使用HTML 4.01的嚴格「的文檔類型時，不垂直居中背景圖像。

添加：

background-attachment: fixed;

應該解決的問題

（所以亞歷山大是右）

來源

2014-09-29 14:34:16 Stephan

如果你不滿意的答案上面，然後用這個

* {margin: 0;padding: 0;} 

    html 
    { 
     height: 100%; 
    } 

    body 
    { 
     background-image: url("background.png"); 
     background-repeat: no-repeat; 
     background-position: center center; 
     background-size: 80%; 
    }

來源

2015-01-11 13:18:12

-2

的只有對我有用的東西是..

margin: 0 auto

來源

2015-08-12 12:15:53 plop

有同樣的問題。使用的顯示和保證金屬性，它的工作。

.background-image { 
    background: url('yourimage.jpg') no-repeat; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    height: whateveryouwantpx; 
    width: whateveryouwantpx; 
}

來源

2016-07-22 21:11:25

只需更換

background-image:url(../images/images2.jpg) no-repeat;

與

background:url(../images/images2.jpg) center;

來源

2017-04-05 15:59:23 Praveen

使用CSS居中背景圖像

回答

相關問題