My problem as you can see is the vertical wall part. As the #falJ and #falB are height:100% they include the bottom wall's end too with the space between the two wall sprites. Is there a way to force backround-position to only use vertical wall part without bottom wall's end?

Short answer: No, this is not the way to do what you want to do. You cannot accommodate fluidity with a sprite that doesn't meet the potential maximum size. Long answer: I'll write up a solution for you in the morning if nobody has been able to assist you with it yet.
–
BenjaminSep 26 '11 at 9:16

@vonkly I was afraid of this. It would be cool if you show me a way to do this. I can wait your solution then :) Thank you :)
–
TheNAkosSep 26 '11 at 9:29

Putting it together for you now - I'll edit this comment when it's complete. Quick question: Is the width of the element fixed, or did you need that to be fluid, too?
–
BenjaminSep 27 '11 at 3:23

@vonkly the width of the left and the right walls are fixed, only the height changes as the window height changes :)
–
TheNAkosSep 27 '11 at 6:33

1 Answer
1

It's not the prettiest thing in the world, but it achieves what you want. Check out the source code & direct link for the background images to see what you'll need to do. It's currently set at 299px wide; I imagine you'll be using something wider.

I'd also suggest adding some padding around your content (either with a p tag, span, another div, etc.) - the way it is currently set up isn't what I'd recommend for readability.

EDIT

The only way I can imagine achieving a fluid width + height box with the borders that you have in the way that you want is to use a second image for the west and east containing divs. This should work with your current method.

Sorry but this is not what I want to achieve. We misunderstand each other. :) The point is I want it to fit in any screen size even when I re-size the window on the fly. In this the top and bottom will always fixed size.
–
TheNAkosSep 28 '11 at 5:57

You told me "only the height changes as the window height changes"; this is not correctly describing your goal. To achieve what you want, use your previous method, and simply using a different image for the west and east walls. There is no way to repeat a specific portion of an image (sprite) in the way you want.
–
BenjaminSep 28 '11 at 8:01

Yeah I see where my English led you the wrong way. I didn't find other solution anywhere else, so I do what you said just now. :) Thank you for your time. If you write this comment in answer, I will accept it :)
–
TheNAkosSep 28 '11 at 8:54

Answer revised. Thanks! I'll keep this in the back of my mind and let you know if I think of something.
–
BenjaminSep 28 '11 at 9:43