如何使2背景「粘」到居中div的邊上

所以我有2個背景，我需要使「貼」在居中div的邊上。無論瀏覽器的寬度如何，div本身都應該集中在頁面上。如何使2背景「粘」到居中div的邊上

我現在的問題是......背景，由於％在瀏覽器寬度調整時正在居中的容器div下移動。他們留在我給他們的比例，但如果我不給他們的百分比和絕對職位...背景不會堅持在一方。

我試圖完成的是在此快照中的葉背景根據瀏覽器的寬度進行調整：http://grab.by/odcy在此屏幕截圖中，我調整了較小的寬度，並且div移位但背景仍保留在％是我給他們的。你會得到我不想要的重疊效果。

/**編輯**/

的居中的div應該沒有任何背景的下面，請注意，在灰色的在底部。

我想確保第一片葉子的最右側和第二片葉子的最左側始終與居中的div對齊，並且不會因調整而中斷。在這個畫面帽... http://grab.by/odlC

/**編輯完**/

這裏是我的html簡化：

<div id="bg1"></div> 
<div class="container"></div> 
<div id="bg2"></div>

這裏是我的CSS簡化：

#bg1 { 
    float:right; 
    position:absolute; 
    background:gray; 
    height: 100%; 
    width: 100%; 
    right: 77%; 
    top: 100px; 
    margin-right:2px; 
} 
#bg2 { 
    float:left; 
    position:absolute; 
    background:#ccc; 
    height: 100%; 
    width: 100%; 
    left: 25%; 
    top: 100px; 
    margin-left: 325px; 
    overflow-x:hidden; 
} 

.container { 
    margin:0 auto; 
    width:260px; 
    height:500px; /*for demo only */ 
}

我創建了一個小提琴以及此：http://jsfiddle.net/feitla/YSAsj/

有沒有人知道如何讓背景堅持居中的div的解決方案，還可以重新調整，而不會像在截圖中那樣在div下面移動？

非常感謝！

來源

2013-07-05 feitla

你爲什麼不給背景身體本身？ – Nitesh

看着你的截圖，看起來你想要葉子背景平鋪在白色容器下面的任何地方，這應該是灰色的。您可以使用葉子設計來平鋪主容器，而不僅僅是覆蓋包含純灰色背景的<div>。

小提琴這裏 - http://jsfiddle.net/FgU6R/2/

HTML

<div id="leaf-bg"> 
    <div id="grey-bg"> 
     <div class="container"> 
     </div> 
    </div> 
</div>

CSS

#leaf-bg 
{ 
    background: url('http://s22.postimg.org/l1o86vn6l/leaf_sample.gif') repeat; 
    width: 100%; 
    height: 100%; 
} 
#grey-bg 
{ 
    margin:0 auto; 
    position: relative; 
    background-color: #d2d1d1; 
    width:330px; 
    height: 500px; 
} 
.container 
{ 
    width: 100%; 
    background-color: #FFFFFF; 
    border: 1px solid #AAAAAA; 
    width:330px; 
    height:300px; /*for demo only */ 
}

來源

2013-07-05 19:38:40

這種方法（我也試過）唯一的問題是，在重新調整...灰色背景與葉子背景以一種沒有吸引力的方式重疊在一起，葉子看起來像是被點斷了。我想確保第一片葉子的最右邊和第二片葉子的最左邊將永遠是堅實的葉子。我不關心瀏覽器邊緣或邊緣由於重新調整而被切斷。 – feitla

我調整了我的問題，更好地解釋了期望的結果以及它應該是什麼樣子的新屏幕截圖。 – feitla

最簡單的方法是將背景放在身體上作爲重複的背景，即在身體上，或100％寬度的包含其中的其他div的容器。

像這樣....

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

，有你的背景的CSS是...

#backdrop { 
Background: url(../yourimage.png) repeat-y; 
Width:100%; 
}

這涉及到編輯圖像，使其看起來不啻爲一個重複的圖像。 ...

來源

2013-07-05 19:06:05 KyleK

請參閱編輯問題以瞭解應達到的結果。居中的div不應該有下面的葉背景和葉背景應該齊平到居中div的兩側... – feitla

HTML代碼：

<div class="main"> 
<div id="bg1"></div> 
<div id="bg2"></div> 
</div>

CSS代碼：

.main { 
width: xx px; 
height: xx px; 
} 
#bg1 { 
width: 50%; 
height: 100%; 
} 
#bg2 { 
width: 50%; 
height: 100%; 
}

您應該將marign和padding值分配給用於居中div的主類。您可以將其他代碼添加到這些代碼。

來源

2013-07-05 19:20:21 Lightsaber

如何使2背景「粘」到居中div的邊上

回答

相關問題