沿网站两侧的垂直条

我正在制作一个网站和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

沿网站两侧的垂直条

回答

相关问题