A recent SP post made ponder this topic at length…
Using CSS2.1…
I’ve seen centered web pages in which side decorational images(usually bg images) flank both sides of the main content.
in some cases this is achieved by creating a background image the width of the page-content + 2X the widest of the side flanks and horizontally centering it to the body or other 100% container. The problems with this method is that it requires going back to a photo editor for any minor changes and , of course, that it makes for very large GIF/PNG background images( and is not very suitable for sprites either)
I know a couple of other techniques using nested wrappers or pseudo elements which allow for more efficient use of images even sprites, but both have the same strange side-effect that when the viewport gets smaller than width of the page-content + the widest of the side flanks, a horizontal scroll bar appears; worse if the viewport is exactly as wide as the main content, then you will be able to scroll to the right and see the right flank image.
EXAMPLE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body{background: silver;padding:0 ; margin:0 0 0 0}
#content{min-height:400px; background: pink; }
#shell { margin:0 auto;width:960px; }
#sides {position: relative; height:0px; width:100%;}
#sides:before{content:""; position:absolute; background: url(http://raym31.home.comcast.net/~raym31/sides/havoc_sprite.png) no-repeat left top;height:300px; width:104px ; top:50px; left:-104px ; }
#sides:after{content:""; position:relative; float:right; background: url(http://raym31.home.comcast.net/~raym31/sides/havoc_sprite.png) no-repeat right top; height:300px;width:105px; top:100px; right: -105px; }
</style>
</head>
<body>
<div id="shell">
<div id="sides"></div>
<div id="content">content</div>
</div>
</body>
</html>
This one ALMOST works , but because the elements are positioned at the edges of #shell, the mages go out of view from the inside out, and not the other way around as desired ( I should have seen this one coming!)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body{background: silver;padding:0 ; margin:0 }
#shell{ position: relative; max-width: 1170px; margin:0 auto; width:100%}
#shell:before{content:""; position:absolute; background: url(http://raym31.home.comcast.net/~raym31/sides/havoc_sprite.png) no-repeat 0 top ;height:300px; width:100px ; top:55px; left:5px}
#shell:after{content:""; position:absolute; background: url(http://raym31.home.comcast.net/~raym31/sides/havoc_sprite.png) no-repeat 100% top ; height:300px;width:110px; top:125px; ; right:-5px}
#content { margin:0 auto;width:960px; min-height:555px; background: pink; position: relative; z-index: 35}
</style>
</head>
<body>
<div id="shell">
<div id="content">content</div></div>
</body>
</html>
After thinking about this for a coupe of days, the best technique I could come up with involves slicing the BG image and nested OUTER containers so at least you can use the background property to control the vertical position of the images. However the image slices must still be the width of the page-content + 2X the widest of the side flanks and it doesn’t allow for sprites, so it’s not as efficient as I would or maneuverable as I would like.
I would be curious to know if there is a way to AP/RP an element off the RIGHT of the edge of a container so that it is still visible if the viewport is wide enough but w/o causing scrollbar when it’s not ? I also would welcome any other insights as to how to handle this challenge… is it even possible to optimize via the method am following… or is the best practice still to create multiple and specific BG images?
