在響應式佈局

我設計一個響應式佈局，並放置在使用以下CSS背景上一個蹩腳的PNG覆蓋絕對定位的背景：在響應式佈局

#bg{ 
    background:url(images/top1.png) no-repeat; 
    position:absolute; 
    width:1423px; 
    height:350px; 
    top:0; 
    left:50%; 
    margin-left: -711px; 
}

這樣，圖像始終，無論在頁面中央的寬度。當瀏覽器窗口縮小到寬度小於#bg覆蓋圖的背景圖像時，會出現問題。水平滾動條出現，背景延伸到右側（尤其是當瀏覽器非常小時）。

你可以看到這這裏DEMO：http://pixelcakecreative.com/cimlife/responsive2/

正如你可以看到出現一個水平滾動條，我想瀏覽器窗口縮小，而不是保留圖像的全部寬度！有任何想法嗎？

來源

2011-12-03 JCHASE11

我接着說：最大寬度：100％'，和滾動條變小，但不能完全消除。（如果您使用JavaScript進行響應，爲什麼不能用JS調整背景？） –

不要忘記在文本框中添加type =「text」。 – ZippyV

試試這個CSS代碼：

 #bg{ 
background:url(images/top1.png) no-repeat center; 
position:absolute; 
width:100%; 
height:350px; 
top:0px; 
left:0px; 
}

來源

2011-12-03 20:10:04

這確實修復了它，但是當瀏覽器足夠小時，會出現另一個水平滾動條。任何想法爲什麼？這不是因爲絕對定位的BG，而是其他的東西。 – JCHASE11

剛剛有了一個快速瀏覽一下你的代碼。看看你的導航，這個產生滾動條。

查看如何在瀏覽器中啓用開發人員工具來檢查您的頁面。這是檢查元素屬性的好方法。

下面是Chrome的一個很好的介紹：Link

而對於Safari瀏覽器：Link

來源

2011-12-04 16:57:31 Melros

在響應式佈局

回答

相關問題