Question

我正在创建一个网站，并且我喜欢这两面有一个在Y上重复的图像。有点像这个网站。 http://www.solutionkaizen.com/html/boutique.php我只是不确定如何为它制作div。对于CSS，我认为它基本上将div的bg设置为我的图像并重复Y.谢谢

我知道如何做css部分，但是我如何创建一个横跨整个网站的div？感谢

但是这个div如何为双方工作：

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

这个也是一个很好的例子 http://www.ecodetox.ca/

Answer 1

<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>

网站本身正在使用一个带有两个其他图像的表来移除我上面的例子产生的硬边缘。

Answer 2

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

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

Answer 3

如果你看到他们的代码，他们会使用一个非常真正高的图像作为背景，并将它们设置为整个身体的背景......

他们的形象：http://www.solutionkaizen.com/images/background.jpg（如果缩放以适合浏览器，您可以放大它。）

Answer 4

为了最好地完成这些网站使用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>

沿网站两侧的垂直条带

4 个答案: