無法將div和背景定位爲與不同屏幕尺寸對齊

標題說明了大部分屏幕尺寸。我有一個div容器，可容納所有網站div和背景。我只是試圖讓背景「伸展」正確，如果你把屏幕從最大或如果它是在不同的顯示器尺寸/像素（有一臺計算機在工作，不填滿屏幕，但我的寬屏幕和其他最多的）。另外，如果您從最大屏幕中刪除，則會切斷部分網站，但我不知道爲什麼。無法將div和背景定位爲與不同屏幕尺寸對齊

相關CSS：

body { 

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
text-decoration: none; 
color: lightsteelblue; 
font-size: 14px; 
background-image: url("../images/hardcoregames-bg-final.png"); 
-webkit-background-size: 100%; /*for webKit*/ 
-moz-background-size: 100%; /*Mozilla*/ 
-o-background-size: 100%; /*opera*/ 
background-size: 100%; /*generic*/ 
background-repeat: no-repeat; 
background-position: top left; 
background-color: #222; 
} 
#maindiv { 
position: relative; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%; 
} 
#navigation { 
position: absolute; 
top: 50px; 
/*left: 360px; 
margin: 0px;*/ 
left: 50%; 
margin-left: -325px; 
z-index: 10000; 
width: 650px; 
height: 100px; 
padding: 50px 20px; 
background-color: transparent; 
float: left; 
}

我的標記很簡單：

<body> 
    <div id="maindiv"> 
     <div id="navigation"> 
      <img src="images/hardcoregames-logo1.png"></img> 
     </div> 
     <div id="other divs just like navigation but positioned in different spots"> 
      stuff 
     </div> 
    </div> 
<body>

看到它在行動：Site 我一直使用100％的寬度和高度的背景 - 嘗試大小，但這使高度不在汽車上更糟糕。我試圖把主要的div作爲絕對的。我試過用背景大小來掩飾。補充一點，我在這裏看到過其他的東西，但我讀過的所有想法迄今都沒有工作，並且我不希望背景固定，圖像和主頁一樣大，所以我想就這樣。

P.S. 請大家提醒一下，在IE上最大化屏幕出現時，「maindiv」也會被切斷。我在後臺添加了這個問題，因爲我認爲他們都必須處理我的寬度/高度，但是我真的不知道。我發佈的代碼工作正常，直到您將屏幕縮小到足夠小，然後向右滾動。同樣在大小相同的IE屏幕上，你不能再一直留在網站上，而是切斷它。

圖像顯示一直向左和向右滾動。向右滾動，它會切斷頁面的1/3。向右滾動，bg沒有填滿所有的方式，它看起來愚蠢。 pics

來源

2012-07-25 Grant

我得到了什麼問題在這裏，您的導航是絕對定位，並導致這種情況下，當您的瀏覽器調整大小inshort，你的標記和定位是錯誤的 – 2012-07-25 04:53:21

在相對，「maindiv」的所有div是絕對的。難道他們不一定要讓我擁有自己的位置嗎？因爲他們是在一個相對的pos容器中？ – Grant 2012-07-25 05:50:15

你正在使用負邊距，你必須修復很多東西 – 2012-07-25 05:51:24

這種設置是什麼固定的「腰斬當取消最大屏幕時，網頁「關閉」。 Fixed Thanks @Mr。外星人

爲背景;在我的研究中，應該是顯而易見的，你不能「動態」地改變背景，因爲人在CSS中改變了IE的窗口大小。據我所知，這固定了每個初始屏幕尺寸的背景。

html, body { 
    height: 100%; 
    width: 100%; 
    background-image: url("../images/hardcoregames-bg-final.png"); 
    -webkit-background-size: 100% auto; /*for webKit*/ 
    -moz-background-size: 100% auto; /*Mozilla*/ 
    -o-background-size: 100% auto; /*opera*/ 
    background-size: 100% auto; /*generic*/ 
    background-repeat: no-repeat; 
    background-position: top left; 
    background-color: #222; 
}

如果我錯了，請糾正我。但我能做的最好的事情是最初確定背景大小，就是這樣。我想一些JavaScript或更好的，jquery可以解決這個問題，因爲它是一個動態工作的問題。我會保持這個答案現在打開，如果我錯了，請評論。不想讓錯誤的信息出去。

來源

2012-07-26 04:07:23 Grant

如果我正確理解...

創建背景圖像足夠大的最寬的標準屏幕分辨率（2560）和最小屏幕比率（4：3）。創建尺寸爲2560 x 1920的背景並設置「背景大小：100％自動」應該讓它在所有顯示器上填充背景，沒有任何問題。

來源

2012-07-25 04:34:42 CoreyRS

我希望這不是我必須要做的事情，因爲在這種背景下花費太多時間，但作爲最後的手段，我會做到這一點。 – Grant 2012-07-25 04:45:43

問題可能與背景大小有關。如果您工作的計算機正在使用Internet Explore 8或更低版本，則不支持背景大小。如果這是問題，我可以解釋一下解決辦法，讓我知道。

編輯：不是IE 8，請嘗試以下。

html { 
    background: url('../images/hardcoregames-bg-final.png') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2012-07-25 04:39:24 jsweazy

其中之一是IE 8，但我很確定我指的不是。這很有趣，因爲如果我沒有記錯，IE 8顯示出很好的笑聲。雖然，當我檢查8時，我有特定的寬度高度，但試圖解決新的Windows 7計算機的問題。顯示器實際上是相同的大小，但我很確定像素是「更好」，或者你會這麼說。 – Grant 2012-07-25 04:45:19

好的看看我的編輯 – jsweazy 2012-07-25 04:57:06

不能有固定的背景。如果我這樣做，將bg切成大約一半。 – Grant 2012-07-25 05:53:21

刪除background-position: top left;它會被解決。這將導致您的標誌永遠是在窗口的左上角，而不管窗口大小

來源

2012-07-25 04:48:17

呃..我以爲你擔心「logo」會與導航欄重疊在一起..所以你的問題是背景圖片吧 – 2012-07-25 04:53:26

試試'background-size：contains'代替。這應該修復它...報告輸出 – 2012-07-25 04:56:07

這使它完全消失。我之前嘗試過包含一些其他的東西，它使得它太小了。 – Grant 2012-07-25 05:54:59

這種風格可以讓你的背景舒展在任何不同的分辨率：

body, html 
{ 
    font-size:14px !important; 
    color: lightsteelblue; 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-image: url("../images/hardcoregames-bg-final.png"); 
    background-repeat: repeat-x; 
    background-color: #222; 
    background: no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2012-07-25 05:03:16 Azade

試圖遠離「固定」職位的BG，因爲它削減了幾乎有底部的背景。儘管如此，我很欣賞它，因爲我早些時候嘗試過，它確實有效。只是不能有這樣一個小BG，它不會一直向下滾動。 – Grant 2012-07-25 05:51:13

無法將div和背景定位爲與不同屏幕尺寸對齊

回答

相關問題