固定居中的底部背景位置

我在想我可以用jQuery做到這一點，但我只嘗試用CSS，我試圖定位固定在頁面中心和底部的背景圖片。我的div是1024寬，而高度取決於內容。我希望背景圖像保持居中狀態，直到瀏覽器的大小低於1024寬度，此時我希望將背景圖像設置在左側。（保持正確的背景大小。）固定居中的底部背景位置

這是我在代碼中迄今。

.scroll-stuff{ 
    background-image:url(imgs/leaderboard/percentages.png); 
    background-size:100 100; 
    background-repeat:no-repeat; 
    width:1024px; 
    margin: 0 auto; 
    position:relative; 
    background-attachment:fixed; 
    background-position:center bottom; 
}

來源

2015-08-24 Mitch Barlow

你會提供您HTML也？ – ryanpcmcquen

目前還不清楚是什麼問題：你真的需要'background-attachment：fixed;' ？ – Cheslab

只要瀏覽器窗口寬度至少爲1024像素，我希望背景圖像始終居中並位於頁面底部。一旦窗口的大小低於1024，它將不再居中，而是與頁面的左側對齊，仍然位於頁面的底部。 –

使用媒體查詢。如果你只是想改變圖像的位置，然後下面的工作

@media all and (max-width: 1024px) { 
    .scroll-stuff { 
     background-position:left bottom; 
    } 
}

來源

2016-11-11 00:20:54

固定居中的底部背景位置

回答

相關問題