全屏幕背景與封面，但專注於圖像的一部分

Question

我想要一個div有一個覆蓋整個div的背景圖像，但是當瀏覽器窗口大小變化不會過度縮小，而是集中在一個點上圖片。

一個很好的例子是this，但是當您縮小窗口大小時，它會將焦點放在黃色標誌上，而不是圖像中間。

是否有插件或教程這種事情？我確信，使用jquery和css圖像精靈，我可以想出一些東西，但我寧願使用經過驗證的插件或技術，而不是將某些東西拼湊在一起。

Answer 1

嗯，我想這是從困難就我想象的，但我希望的行爲可以簡單地通過這樣來實現：

{ 
background: url('http://farm8.staticflickr.com/7218/7289572558_44c110c510_h.jpg') no-repeat 95% 50%; 
min-height: 100%; 
background-size: cover; 
} 

Answer 2

您可以添加背景位置和其他編輯..

這種方式應該調整..

background: url('IMG.PNG') no-repeat center center; 
min-height: 100%; 
background-size: cover; 

提供位置支撐

background-position-x: -100px; 
background-position-y: 100px; 

您需要考慮的背景大小雖然你會裁剪。

如果您不考慮將BG的大小限制爲文檔大小，您可以將其定位（提供的圖像大於用戶屏幕），然後溢出：隱藏以移除這些滾動條，但仍然不是最優雅的辦法。