ansaurus

Question

Answer 1

A:

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

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

jspcal 2010-01-10 02:29:30

Answer 2

A:

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

Gaby 2010-01-10 02:33:31

Answer 3

A:

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

James Morris 2010-01-10 02:41:39

Answer 4

A:

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>

Paperjam 2010-01-10 05:34:36

ansaurus

tags:

views:

answers:

Vertical strip along sides of website

related questions