CSS背景圖像居中和div元素的位置基於相對於主bg圖像的百分比

Question

這可能已經在另一個主題，但我似乎無法找到任何答案，這將有助於我的設計。

我有一個css背景圖片，無論瀏覽器大小如何，它都會保持居中。使用的圖像不會拉伸瀏覽器的整個寬度。在這種情況下，我需要在CSS中放置背景圖像和鏈接的div，以保持它們相對於保持居中的背景圖像的位置，而不管瀏覽器的大小如何。

我與..

position:relative; 

周圍涉足，但級聯的所有元素和犯規讓我找的具體定位。這是我正在使用的代碼。我很感謝任何有關我的新問題的見解，並期待學習如何更好地表現。

在不同大小的瀏覽器上查看此代碼時，如果背景圖像不能覆蓋整個寬度，則元素會移動，因爲它們設置爲百分比。我需要他們留在原地，但仍然以背景爲中心。我不確定如何在CSS中編寫這些代碼，並且一直在努力。謝謝你對這個具體問題的任何指導。

body { 
    background:#000 url(bg.jpg) no-repeat center 0; 
} 
#logo { 
    margin: 0px 11%; 
    padding: 0; 
    position:absolute; 
} 

Answer 1

您的問題可能已經被回答了類似StackOverflowers：

Position=fixed but Margin=auto

margin to center with position fixed

你原來的問題不清楚，因此，如果這些不適合您發表評論。

Answer 2

嘗試將分組元素放到一個div〜say容器中，然後將背景設置爲div。 然後將div〜container〜位置設置爲相對並居中。

然後使用絕對位置和頂部底部左右屬性來對齊其他元素，使用〜容器〜div。

這裏是它

<div id="container"> 
    <div id="element1"></div> 
    <div id="element1"></div> 
</div> 

<style type="text/css"> 
    #container { 
     background:#000 url(bg.jpg) no-repeat center 0; 
     width: 800px; height: 400px 
     position: relative; 
     top: 50%; left: 50%; 
     margin-top: -200px; margin-left: -400px } 
    #element1 { 
     position: absolute; 
     top: -30px; left: -20px;} 
    #element2 { 
     position: absolute; 
     top: 410px; left: 820px;} 
</style>