左右各有不同背景的居中DIV

所以我創建了一個網站，它的所有內容都集中在一個居中的div上。左右各有不同背景的居中DIV

使用margin-left和right設置爲自動將我的內容居中放在我內容的左側我想要純白色背景，但在右側，我想重複圖案背景。

也許我的腦子裏只想工作不正常，但我不能認爲這對今天的解決方案的..

------------------------------------------- 
| white | content  | pattern |   
| bg  | centered  | bg  | 
|   |     |   | 
|   |     |   | 
-------------------------------------------

來源

2009-10-08 Conor

可能不需要[ CSS]問題標題 – aronchick 2009-10-08 18:46:41

使用1680像素寬的圖像，一半白色，一半作爲您的圖案，並使用repeat-y垂直重複並居中......這將有助於您在將來說您想將背景更改爲您贏得的單個圖案「T不得不改變任何東西，但在BG IMG文件...

body{ 
    background:url(../images/bg.jpg) fixed; 
    background-repeat:repeat-y; 
    background-position:top center; 
}

您也可以使用margin:0 auto;
中心內容區域*您可以輕鬆地photoshop

創建一半白色，一半圖案的背景圖像

來源

2009-10-08 18:54:53 halocursed

完美！它可能不是最乾淨的解決方案，但它使我不必完全重寫我的頁面結構。我的3000px寬bg /模式仍然在2kb以下，所以filesize不是問題。 – Conor 2009-10-08 19:22:28

我爲我的網站使用了類似的東西來添加陰影..Trust我很好用的解決方案gamespot，遊戲追蹤器使用類似的技術來爲他們的內容添加陰影<看着他們的代碼：）> – halocursed 2009-10-08 19:51:29

您可以使用5 3-column layout options之一。然後，只需將第三列的背景圖像設置爲任何你想要的，重複。

來源

2009-10-08 18:40:43 EndangeredMassa

您可以使用3列布局技術，並將右列和左列設置爲不同的背景。一個這樣的描述here。

根據背景圖片的不同，您可能還可以執行類似以下操作： background：url（...）＃000 repeat -y right;

如果背景圖像足夠寬，可以從屏幕右側到達中心內容下方並需要垂直重複，這將起作用。但是，這會根據不同的屏幕分辨率而改變。

來源

2009-10-08 18:44:25

左右各有不同背景的居中DIV

回答

相關問題