嘗試使大背景圖像保持以自動邊距為中心的內容div居中，但bg圖像不應影響布局

Question

我想要一個大於內容的背景圖像，它將保持與內容居中，但不會影響布局（意味着沒有滾動條來容納背景圖像）。 內容必須使用margin：auto; 當視窗變得小於內容時，左側將與視圖窗格的左側保持齊平。

我已經多次看過這個問題了，並且已經嘗試了很多解決方案，但是沒有一個已經接受的答案確實有效。

編輯澄清

這個問題仍然有點模糊，所以我會嘗試用一些圖片來說明我需要什么。 在這些圖像中，綠色是背景圖像，紅色是主要內容，藍色是瀏覽器的視圖。

答：當視圖窗口小於背景圖像和主要內容時，內容的左側與視圖窗格的左側保持齊平，背景圖像保持居中於主要內容，視圖窗格滾動條僅滾動出到主要內容的右邊緣（而不是背景的右邊緣）。

B：當視圖窗格大於背景圖像和內容時，兩者都保持在視圖窗格的中心。

C：當視圖窗格與主要內容的大小相同時，背景圖像應保持居中於主要內容，不應存在滾動條。

Answer 1

更新后的答案 ：我仍然花了太多時間在這上面:-)，特別是當它結束如此簡單時。 它允許根據容器的高度調整背景大小 ，這似乎與yunzen的解決方案不同。 現在確實使用margin: 0 auto; 。 仍然隨容器高度增長。

查看新答案。

您可以查看不使用auto邊距的原始，更復雜的答案 。

HTML：

<div id="Bkg">
   <div id="Content">Content goes here. </div>
</div>

CSS：

#Bkg {
    width: 100%;
    min-width: 300px; /* equals width of content */
    background:url('http://dummyimage.com/400x20/ffff00/000000&text=Center') repeat-y top center;
    padding-bottom: 50px;
}

#Content {
    width: 300px;
    margin: 0 auto; 
}

Answer 2

我想這就是你想要的

---

HTML

<div id="content">
    content<br/><br /><br/>
    content<br/>
</div>
<div id="background"><div></div></div>

---

CSS

html, body {
   height: 100%;
}

#background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* this is the height of the bg image */
    min-height: 600px;
    z-index: -1;
}
#background > div {
    margin: 0 auto;
    background: url("http://lorempixel.com/800/600/sports/2") no-repeat 50% top gray;
    width: 100%;
    height: 100%;
    /* this is the height of the content */
    min-width: 500px;
    /* this is the width of the bg image */
    max-width: 800px;
    /* this is the height of the bg image */
    max-height: 600px;
    z-index: -1;
}
#content {
    /* these are just some numbers */
    width: 500px;
    height: 400px;
    border: 1px solid gold;
    margin: 0 auto;
    background: rgba(255,255,255,0.2);
}

Answer 3

好吧，如果它超出瀏覽器的窗口大小，它將為整個窗口創建一個滾動條。 我不確定你要阻止什么滾動條。

max-width告訴它“在任何情況下，此框都不應大於此寬度。” 因此，比這更大的盒子將簡單地擴展到父母的邊界之外。

看到j​​sFiddle。

Answer 4

如果我正確理解這個問題，我相信這就是你想要的。

.main-container
{
    height: 1005px;
    left: 50%;
    margin-left: -560px;
    position: relative;
    width: 1120px;
}

要隱藏滾動條，您可以添加

overflow: hidden;

僅限水平：

overflow-x: hidden;

Answer 5

試試這個：

<div id="wrapper" style="position:relative;margin:auto;width:200px;height:200px;">
<div id="image" style="position:absolute;top:0px;left:-100px;width:400px;height:400px;background-image:url(your_bgimage);background-repeat:no-repeat;background-position:top center;">
<div id="content" style="position:absolute;top:0px;left:100px;width:200px;height:200px;"><p>
<p>/* YOUR CONTENT */</P>
</div></div></div>

出於某種原因，我無法使z-index工作，但如果可以，您也可以將內容放在wrapper ，並且不需要content 。

Answer 6

鑒於您的原始圖表，我假設背景圖像的目的是 - 圖像，可能是高分辨率，而不是重復圖案。 您可能希望使用css3 background-size屬性，這對於此特定目的很方便。 它得到了現代瀏覽器的良好支持，並且如果你必須支持IE8及以下版本，它們會相當好地回歸。

body {
  background-image:url(/*nice higher res picture*/);
  background-size:cover;
  background-repeat:no-repeat;
}

http://jsfiddle.net/YyzAX/