Page is a not externally linkable
Paul_o_b - 12:50 pm on Apr 19, 2012 (gmt 0)
Hi,
There are loads of ways you can do this depending on browsers support but here is a way that should work back to ie6 and beyond.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
html, body { height:100% }
body {
padding-right:50%;
background:#fff;
}
#outer {
background:#000;
min-height:100%;
}
* html #outer { height:100% }
.inner {
padding:1px 0;
margin-right:-100%;
position:relative;
zoom:1.0;
color:red;
}
p{padding:0 10px;margin:0 0 1em}
</style>
</head>
<body>
<div id="outer">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec sapien nec urna mollis sagittis. Suspendisse leo eros, tempus sed convallis vitae, rhoncus ut est. Nam ut orci sapien, ac vehicula quam. Mauris blandit sodales ipsum nec ornare. Curabitur sodales augue id mauris gravida mattis. Maecenas vitae dui turpis. Curabitur commodo velit ut arcu adipiscing id scelerisque velit ullamcorper. Quisque at consectetur justo. Fusce eget ipsum justo. Sed leo nisi, pulvinar at molestie id, consectetur in lacus.</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</body>
</html>
You could of course just make a very wide two tone image and repeat it centrally on the body for the same effect. Make the image about 3000px wide by about 5px high and it will cater for most everyone and still be a about a quarter of 1k so filesize is not really an issue.