背景附件滾動與固定

我有一個2000像素寬度的背景圖片。它以下面的方式進行準備：對於內容中心爲1000px，對於高分辨率顯示器中的邊緣則爲左右500px。背景附件滾動與固定

我希望它能夠集中在每個分辨率上。

當我嘗試使用bg {background:url(bg.jpg) no-repeat center top fixed; }圖像時，圖像被正確居中，但它顯然不滾動。

所以我會scroll更換fixed： bg {background:url(bg.jpg) no-repeat center top scroll; }但比圖像不居中 - 它開始從左上角顯示，因此在較小的分辨率可以看到留有餘量，這不應該是可見的。

以下是jsfiddle.net的示例。玩background-attachment值scroll/fixed並嘗試減小結果窗口的大小，你會希望瞭解我的意思。

你能幫我解決這個問題嗎？

來源

2012-01-03 user1128796

你可以設置一個jsfiddle嗎？ – 2012-01-03 22:59:12

或[CSSDesk]（http://cssdesk.com）。您發佈的CSS代碼片段似乎是有效的。 – benesch 2012-01-03 23:01:37

我編輯了我的問題並添加了jsfiddle。 – user1128796 2012-01-03 23:31:54

嘗試使用background-attachment性質類似下面

background-attachment:scroll;

來源

2012-01-03 23:02:09

使用媒體查詢。像這樣的東西。

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 

#left-margin-div { 
width:500px; 
height:1700px; /*or whatever your height is*/ 
background-image:url('yourimage.jpg'); 
position:absolute; 
left:-500px; 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
}

來源

2012-01-03 23:02:48

背景附件滾動與固定

回答

相關問題