Vertical strip along sides of website_问答_开发者

开发者 https://www.devze.com 2022-12-16 02:33 出处：网络

I\'m making a website and Id like the sides to have an image that repeats on the Y. Sort of like this website. http://www.solutionkaizen.com/html/boutique.php Im just not sure how to make the div for

I'm making a website and Id like the sides to have an image that repeats on the Y. Sort of like this website. http://www.solutionkaizen.com/html/boutique.php Im just not sure how to make the div for it. For the CSS I think its basically setting the bg of the div to my image and repeat Y. Thanks

I know how to do the css part, but how would I make a div that开发者_如何学编程 spans the whole eight of the site? Thanks

but how can that div work for both sides:

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

This one is also a great example http://www.ecodetox.ca/

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

The site itself is using a table with two further images to remove the hard edge which my example above produces.

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

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

if you see their code they use a really, really tall image as background and they have set it as background of the whole body ...

their image : http://www.solutionkaizen.com/images/background.jpg (you can zoom on it if it gets scaled to fit the browser..)

To best accomplish what those sites are doing with CSS, I'd go with this:

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>