Vertical strip along sides of website
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>
加载中,请稍侯......
精彩评论