Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 372
  • Last Modified:

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:-
<body style="background: url(Left.png) repeat-y left top; background: url(Right.png) repeat-y right top;">


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
  • 4
1 Solution
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?
BTW, if you use the background property twice, browsers will only obey the last one.
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.
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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?
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.
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.

#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)

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now