CSS3 : aligning border images to content

HTML & CSS
1

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

2

Hi,

I haven’t looked at border images much what I understand from the specs is that the middle section is placed at the horizontal center and then repeated up and down from that point. There seems to be no provision to repeat an image from the top thus preserving the spacing (apart from the last item).

Therefore your lines will only match up at exact (50px) heights because the center will change depending on content and the point at which the image is repeated from changes.

That’s how it looks to me anyway :slight_smile:

3

Thanks Paul, but I am still unclear.

middle section is placed at the horizontal center

so this would be the equivalent of background-position: top center or background-position: middle center ? and is there a way to access that background-position attribute with border image?

BTW they don’t match up at exactly 50px, my idea would work then, instead they match up at a 100px. ( but the center image is 100px by 100px).

4

From my brief tests it seems that the middle part of the image is placed at 0 50% and then repeats upwards and downwards from that point.

Specs

Position the first tile.

  • If the first keyword is ‘repeat’, the top, middle, and bottom images are centered horizontally in their respective areas. Otherwise the images are placed at the left edge of their respective parts of the border-image area.
  • If the second keyword is ‘repeat’, the left, middle, and right images are centered vertically in their respective areas. Otherwise the images are placed at the top edge of their respective parts of the border-image area.

It doesn’t start from the top and repeat downwards and there seems to be no way to define the start point at present.

You can play with the [%2C%22imageOffset%22%3A[50%2C41%2C50%2C40]%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A[%22round%22%2C%22repeat%22]%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue%7D"]generator](http://border-image.com/#{“src”%3A"page-store%3A%2F%2F1"%2C"linkBorder"%3Atrue%2C"borderWidth"%3A[0%2C0%2C0%2C0) here to see the effect in real time.

5

I guess I now understand why border-image is still not as popularly adopted. Still, the temptation of of being able to have transparent edges is just too great.

Anyhow, I found that using “round” does attach the image to the top instead of the center but then, of course , the image is resized so it still doesn’t align unless I the tile is equal to the line height. Repeat with image align would have been the ideal solution… oh well. Thanks again for the insight , PAUL.

6

Yes if you use “round” then the image is tiled as normally but when it’s finished tiling the remaining space is calculated and the whole image adjusted slightly so that it makes an exact fit. This means that your 50px lines will be stretched or narrowed depending on the height of the element. It will probably never be 50px apart unless the height is an exact multiple of 50px.

7

I can see why they did it that way. it’s probably the easiest (laziest) way for a rendering agent to calculate a repeat. It really makes no difference for regular patterns, but it when you are trying to create a more organic look…it really jumbles things up.