I am not quite sure how to phrase this question, so excuse me if I ramble.
I am experimenting the CSS3 border image property. For the sake of this example, say I wanted to stylize a containing div to appear as a sheet of ruled notebook paper. I have done this before using css2 wrapped or multiple elements, and CSS3 and multiple bg-images. It just seems, however, that the border image was intended specifically for this use and I thought I would learn to make the most of it.
In this experiment I want the box to be fluid(it’s set to 40% width/ fluid height) and the text to line up with “paper rules” of the bg image. this should have been pretty simple: remove any padding/margin from any of the child elements, make line height equal to the space between the rules in the bg image… and THEORETICALLY it should work.
But it doesn’t
Or rather it only works on a specific case and that’s all. I made a sample image, where the space between the rules was 50px. Because I didnt want the ragged edge to seem to uniform, I made the image 200px high ( that was 50px + 50px for top and bottom borders, and 100px for the center)
Which means the center BG “slice” would encompass “2 rules” before it repeats again, but still each “rule” is 50pxs apart. therefore, if I have a P with font size of 25px, I SHOULD be able to set a line height of 2 (or 50px) and give it some offset with relative positioning and line up the text with the rules in the image as desired. This works fine if the text wraps into an even # of lines, but breaks when it’s an odd # of lines!?!
Firebug shows that the height of BOTH the wrap and the P elements are same. and multiples of 50px as expected. tho the center image is 100px high its essentially a 50px image repeated twice. IF i set it up so that the line height is a multiple of a 100% it works fine, but this would not be very versatile.
Looking at the behaviour of this code it seems as if the attach of the bg image slice is different depending on the height of the content… and thus causing the misalignment . which is why i am wondering how the main BG image works/is attached for the border-image property.
a live demo of what I have described can be found here:http://raym31.home.comcast.net/~raym31/paper
and my BG source image is this
Suggestions and wise advice highly welcome