[thelist] CSS Backgrounds: repeat-x width:100%

Maximillian Schwanekamp anaxamaxan at neptunewebworks.com
Thu Mar 18 19:09:29 CST 2004


How about using "Sliding Doors" technique?  That is, split your bg image
webback.jpg into a left side version (webback_left.gif) and a right side
(webback_right.gif) version, and enclose everything within the body in a
div.  Something like:
<body>
<div id="content-container">
<!-- page content -->
</div>
</body>

body {
	background: white url(/tmp/stretch_bg_files/webback_left.gif) left
repeat-y;
	width:100%;
}
div#content-container {
	margin: 0; padding: 0;
	background: transparent url(/tmp/stretch_bg_files/webback_right.gif) right
repeat-y;
	width:100%;
	height:100%;
}

Seems OK in IE, Moz and Opera 7...  here's a link to a hasty mockup version:
http://www.neptunewebworks.com/tmp/stretch_bg.htm

Max




More information about the thelist mailing list