沿網站兩側的垂直條

我正在製作一個網站和Id像兩側有一個圖像重複在Y.有點像這個網站。 http://www.solutionkaizen.com/html/boutique.php我只是不知道如何使它的div。對於CSS，我認爲它基本上將div的bg設置爲我的圖像並重復Y.謝謝沿網站兩側的垂直條

我知道如何做css部分，但是如何製作跨越整個網站的八個div？感謝

但如何才能讓雙方該專區的工作：

< page content > 
<     > 
<     > 
<     > 
<     >

這一個也是一個很好的例子 http://www.ecodetox.ca/

來源

2010-01-10 jmasterx

你能不能查看源該網站找到的CSS的網址和下載，看看他們是如何做到這一點？ – 2010-01-10 02:28:17

<style type="text/css"> 
<!-- 
body { 
    background-color: #FFFFFF; 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    background-image: url(background.jpg); 
} 

div#main { 
    background-color: #fff; 
    margin-left:12%; 
    margin-right:12%; 
} 
--> 
</style> 
</head> 

<body> 
<div id=main>Hello World!</div> 
</body> 
</html>

該網站本身使用與另外兩個圖像的表刪除的硬邊這上面我舉的例子產生。

來源

2010-01-10 02:41:39

#div { 
    background-image: url('bg.png'); 
    background-repeat: repeat-y; 
    background-color: #fff; 
} 

<div id="div">Greetings!</div>

來源

2010-01-10 02:29:30 jspcal

，如果你看到他們的代碼，他們使用一個真正的，真的是高大的圖像作爲背景，他們已經把它作爲整個身體的背景...

他們的形象：http://www.solutionkaizen.com/images/background.jpg（你可以在它放大，如果它得到縮放以適應瀏覽器..）

來源

2010-01-10 02:33:31

爲了更好地完成的這些網站與CSS做的，我會用這個去：

CSS：

body 
    { 
     background: White url("vertical-fading-bk.png") repeat-x; 
    } 

    #container 
    { 
     width: 800px; 
     background-color: White; 
    } 

    .side-fade 
    { 
     width: 10px; 
    } 

    #left 
    { 
     float: left; 
     background: #ececec url("left-soft-fade.png") no-repeat; 
    } 

    #middle 
    { 
     width: 780px; /* (.side-fade * 2) - #container */ 
     background-color: White 
    } 

    #right 
    { 
     float: right; 
     background: #ececec url("right-soft-fade.png") no-repeat; 
    }

HTML：

<body> 

    <div id="container"> 
     <div id="right" class="side-fade"> 
      <!-- Note how #right comes first. --> 
     </div> 
     <div id="left" class="side-fade"> 
      <!-- Then #left. --> 
     </div> 
     <div id="middle"> 
      Main body content here... 
     </div> 

    </div> 

</body>

來源

2010-01-10 05:34:36

沿網站兩側的垂直條

回答

相關問題