對齊背景圖像中心，並相對地調整（垂直）

Question

我有一個滑塊div和背景圖像。由於背景圖像是不適合（太大），其中心：

http://jsfiddle.net/s5qvY/

<div id="slider"></div><hr><hr><img src="http://hdwallpaper2013.com/wp-content/uploads/2013/02/Download-Flower-Background-Images-HD-Wallpaper.jpg" width="100%" /> 

#slider 
{ 
    width: 100%; 
    height: 100px; 
    background-size: 100% auto; 
    background-position: center; 
    background-image: url('http://hdwallpaper2013.com/wp-content/uploads/2013/02/Download-Flower-Background-Images-HD-Wallpaper.jpg'); 
} 

現在我想移動的圖像向上或向下，相對於該中心。我在這裏看到了一種解決方案（對不起，我能找到）：

padding-top: 10px; margin-bottom: -10px;

但只能在一個方向，它只能推圖像上移。像這樣向下移動是不可能的（負邊距）。

任何想法？

Answer 1

使用background-position屬性（見here）

background-position: 50% 10%; 

您可以更改第二個值verticaly對準你的背景。

Answer 2

demo

CSS

html, body { 
    width: 100%; /* important because slider id has width set in %ge*/ 
    height:100%; 
    margin:0; 
    padding:0; 
} 
#slider { 
    width: 100%; 
    height: 100%; 
    background-repeat:none; 
    background-image: url('http://hdwallpaper2013.com/wp-content/uploads/2013/02/Download-Flower-Background-Images-HD-Wallpaper.jpg'); 
    -webkit-background-size: 100% 100%; /* browser support */ 
    -moz-background-size: 100% 100%;/* browser support */ 
    -o-background-size: 100% 100%;/* browser support */ 
    background-size: 100% 100%; 
    background-position: top center; /*you need this one*/ 
} 

Answer 3

background-position: center -50px; 

加入#slider應該給你什麼你之後。將-50px更改爲您所需的任何正值或負值。