hello,
i'm trying to make a web design that "doesn't end" meaning that the top and bottom just keeping going on.
Does anyone know the best way to do it?
thanks.
Do you mean something like
![[Image: christempendlessdesignwx2.png]](http://img369.imageshack.us/img369/985/christempendlessdesignwx2.png)
I'd probably do it by setting a full width but 1 pixel high image as a background of a full height centered div that repeats downwards, but there are other ways of doing it
I still can't find away to do this
. Any one else have any ideas?
Thanks.
Say you have a 1px high and 500px wide image which is a bit like this (but obviously wider):
______________________________
Then you could use this in the css:
Code:
body {
background-image: url('background-image.png');
background-repeat: repeat-y;
background-attachment: fixed; [this could be "scroll" instead or could be missed out altogether]
background-position: center top;
}
You also can do the same thing with a div (more customizable and you can make it dynamic). It can be tricky to implement on account of how different browsers will take the code differently. You can read some more about that
here.
If you are a bit too lazy to read, here is a working example:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example page for full height div</title>
<style type="text/css">
html, body {
height: 100%;
}
#container { /* div you want to stretch */
min-height: 100%;
}
</style>
<!-- IE6 Hack Start -->
<!--[if lte IE 6]>
<style type="text/css">
#container {
height: 100%;
}
</style>
<![endif]-->
<!-- IE6 Hack End -->
</head>
<body>
<div id="container">
this div should be full height (you probably can't see it anyways because there is no background)
</div>
</body>
</html>
I can't tell you how it would work in IE7 though
