Background Image Repeat Down Both Sides

Covert

09-30-2007, 06:05 PM

I seriously need some help with this. I'm redesigning my detachment's website (which I am now in charge of) and have been racking my brain with this for the last few hours.

I need to have an image repeat down the left and right sides, but as you know, with html/css you can only have on background image. So here's what I have:
<style type="text/css">
body {
margin:0;
padding:0;
background:#000000 url(sidepanel.png) left top repeat-y;
height:100%;
}
#bkgnd2 {
position: absolute;
top: 0px;
right: 0px;
height:auto;
width:100%;
min-height:100%;
background:transparent url(sidepanelrev.png) right top repeat-y;
text-align:center;
}
* html #bkgnd2 {
height:100%;
}

</style>
</head>
<body>
<div id="bkgnd2">
</div>
</body>

And this is what I get:
http://img228.imageshack.us/img228/4072/5343333pd0.jpg
As you can see, it works, only it stops after the initial page. If I were to scroll all the way up, it looks good, but once you scroll down, the image stops repeating on the right side. Any ideas on how to fix this?

(It does this is both Firefox and IE.)

JustinSainton

10-01-2007, 12:03 AM

Maybe it's just me, but aren't you basically just having one background, and a content container in centered? That seems to be what you're attempting, and taking that approach will make it a LOT easier for you.

ahallicks

10-01-2007, 01:06 AM

Yeah, just set ONE background image on the html of your site. If the image you want is slightly different on each side then as long as you have a fixed layout this will be easy. Just create an image that is wide enough to span the width of your page and have tha repeat-y... as long as you have centered your page and set the background position to center everything should line up fine too.

martiendejong

09-28-2011, 03:09 PM

ok, but what if you do need two different backgrounds?
I have the same background image but I need it two pixels higher on the right.
my page is 1015 pixels and centered.

I think it's easier to set the background-image on the body for the right part.
So that is what I did so far. Now I only have to find a mechanism for the left part.