爲什麼這不給我一個綠色的每一邊的邊界？

我有這個page它有這個這個CSS爲什麼這不給我一個綠色的每一邊的邊界？

body { 
    background-image: url("images/BACKGROUND5.jpg"); 
    background-repeat: no-repeat; 
}

和兩個div

#borderleft { 
    background: none repeat-y scroll 0 0 #93A87D; 
    clear: left; 
    float: left; 
    margin-left: -10px; 
    margin-top: 610px; 
    visibility: visible; 
    width: 70px; 
    z-index: 2; 
} 

#borderright { 
    background: none repeat-y scroll 0 0 #93A87D; 
    clear: right; 
    float: right; 
    margin-left: -10px; 
    margin-top: 610px; 
    position: relative; 
    visibility: visible; 
    width: 70px; 
    z-index: 2; 
}

這裏是HTML

<body> 
<div id="borderleft"></div> 
<div id="borderright"></div>

如何使圖像中的中心的任何想法和綠色背景：無重複-y滾動0 0＃93A87D;在外側

來源

2011-09-24 Trace

元素的背景不會延伸到其邊緣。你的「邊界」divs寬度爲70px，但沒有高度，只有大的頂部邊距。 –

當兩個邊框列的寬度固定時，做這種佈局的一種好方法是this。

的要素是：

的容器<div>與position: relative
邊界<div> s的position: absolute，固定寬度，以及分別
left: 0/right:0 A 「內容」 <div>與margin-left和margin-right等於到邊界的寬度<div> s。

在我聯繫上面的例子中有沒有div容器（該<body>元素扮演這個角色），但您將需要一個，如果你希望能夠在頁面上移動這種安排爲一個整體。溶液

來源

2011-09-24 23:35:07 Jon

不幸的是，這不會解決他的問題... –

@PauloSantos：爲什麼不呢？ – Jon

我想象O.P.希望圖像集中在窗口中。從他正在使用的圖像來判斷。 –

部分是讓你的身體的風格是這樣的：

body { 
    background-image: url("images/BACKGROUND5.jpg"); 
    background-repeat: no-repeat; 
    background-position: center; 
}

而且，而不必

margin-top: 610px;

在左邊和右邊的div

，嘗試更換與

height: 610px;

來源

2011-09-24 23:37:20

使用你張貼的圖片，我會建議like this。

來源

2011-09-24 23:40:56

爲什麼這不給我一個綠色的每一邊的邊界？

回答

相關問題