Background image left and right

Im wondering if its possible to set a background image for both left and right, so like:-
Body
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
tonelm54Asked:
Who is Participating?
 
nanharbisonCommented:
I go back and forth with fixed versus variable width of websites! It's so hard to choose.  Maybe you would be better off setting a minimum width and then 25%, 50%, 25%? The most pleasing proportion to the human eye is 1.6 to 1, although I suppose that doesn't apply to three columns.
0
 
nanharbisonCommented:
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?
0
 
nanharbisonCommented:
BTW, if you use the background property twice, browsers will only obey the last one.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
tonelm54Author Commented:
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.
0
 
nanharbisonCommented:
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?
0
 
Chris StanyonCommented:
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)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.