asked on

Background image left and right

Im wondering if its possible to set a background image for both left and right, so like:-

Ive got the left and right images set to 1px high, and thought I could code it like:-

<html>
<head>
</head>
<body style="background: url(Left.png) repeat-y left top; background: url(Right.png) repeat-y right top;">

</body>
</html>

Open in new window

But I only get the last background image (so in this case the right image), it just ignores the left so Im assuming its overwritten.

Any ideas how I can get this working?

Thank you

nanharbison

You could create two vertical container divs and have one image in each side. Are you using a fixed width? In that case, why wouldn't you make this image one wide image that is 1 pixel tall?

nanharbison

BTW, if you use the background property twice, browsers will only obey the last one.

tonelm54

ASKER

What I was trying to do was have a variable page width with a fixed div in the middle.

Suppose what I can do is set 2 divs 50% width and a absolute position fixed div.

nanharbison

That wouldn't work because the background images would only be in the outside divs, how wide are these two images? If you put the content in the center, the two outside divs would be pretty narrow, right?

ASKER CERTIFIED SOLUTION

nanharbison

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Chris Stanyon

You could do this with 2 divs, overlaying one another. Give the bottom one the left background and background colour (wrapper1) and the top one the right background and transparent.

<div id="wrapper1">
<div id="wrapper2">
//All of your content goes in here.
</div>
</div>

#wrapper1 { background: url(left.png) repeat-y left top white; }
#wrapper2 { background: url(right.png) repeat-y right top transparent; }

Just make sure your backround image (particularly right.png) isn't too wide, otherwise you will see it overlay the left.png)