Possible to tile this difficult image?

[winteregel]

So I have a little problem, because I want to achieve this effect:

[img]http://junk.purplepies.be/css_snap.png[/img]

As you can see it looks ok with fixed height, but I would like to have this effect on boxes that could be different of length. The line-height on this thing is not perfect (as I did not keep that in mind while designing), but could be changed to have 2-3 lines for each repeating part.

I have a good knowledge of using sprites, so if that would be a solution, the only thing I’d have to know is how I could get a dynamic margin beneath the main text and the details on the bottom, which is – I think – where the problem is located.

Hope anyone here can help :)

[noahgelman]

You can try using border image to display a repeating image down the left side and have it so it doesnt cut off, but you’re going to have to get a little creative.

https://css-tricks.com/understanding-border-image/

[winteregel]

That might do the trick indeed
I doesn’t look that hard, perhaps only the first time, so I’ll fix this for sure!

Do you have any idea how I can get this to fall back on a regular sliding-door technique just for IE (since all the other browser that are supposed to be supported can display border-image)? I’ve been using that throughout the rest of the website to have the rounded corners and hard drop shadow effect.

[noahgelman]

I wouldn’t know. None of my clients so far have requested any kind of sliding door affect.

[winteregel]

So this is how I got it looking with border-image:

[img]http://junk.purplepies.be/css_snap2.png[/img]

I do have to try out some negative margins for the paragraph to get rid of the extra whitespace surrounding it (as borders had to be 40×48 rather than the regular 15px padding), so don’t pay attention to that

It’s almost good as you can see, and I’m thinking of leaving it this way if it solves any variable height problems, but I think this property has a long way to go before it’s useable for difficult images..

[noahgelman]

I think by playing with the values a little you can improve the look. Should be able to get it perfect somehow.

[winteregel]

I thought that too when I first looked at it, but I have practically no control over how the left part repeats itself.. The corners are all as they should be, but the only thing I can to is tell the center part to either stretch or repeat..

This is the image I’m using right now:

[img]http://junk.purplepies.be/news_border_image.gif[/img]

And this is the css (again, without having paid attention to padding or negative margins to contract the whitespace):

Code:

#news li
{
border-width:48px 40px 48px 40px;
-moz-border-image:url("../images/news_border_image.gif") 48 40 48 40 repeat;
-webkit-border-image:url("../images/news_border_image.gif") 48 40 48 40 repeat;
border-image:url("../images/news_border_image.gif") 48 40 48 40 repeat;

width: 240px;
float: left;
line-height: 26px;
color: #999999;
font-size: 14px;
text-shadow: #E5E5E5 0 1px 0;
}

[noahgelman]

Do you have a link to a test page or site? It’s easier to look at and test things out.

[Chris Coyier]

There is occasionally chatter of a "height-increment" property where elements could only grow in height in specified chunks which I think would solve your problem here. I don’t think there is any browser implementations of it though. You might have to rely on JavaScript to measure the height of it and adjust it to the next highest value that ensures a lined up border.Not ideal of course, but that’s our job.

[winteregel]

@noahgelman:

Here’s the live version of the page:
http://student.devine.be/florian.vanthu … ?page=news

Not everything is functional on the website, so if you want to go exploring, keep that in mind

@chriscoyier:

Too bad most of the things that are revolutionary aren’t supported (enough)
I’ll take a look at doing this with js, but my teachers expect this to function without it as well, so that’s where I might consider losing a bit of quality in the representation of the notes..

[noahgelman]

Switch: url("../images/news_border_image.gif") 48 40 48 40 repeat

To: url("../images/news_border_image.gif") 48 40 48 40 round

And you’re all set.

[winteregel]

That did the trick for Firefox, but I seem to still have the same problem in Safari and Chrome Check back on the same url to see for yourself if you have those 3 browsers available.

[noahgelman]

Try switching your 48 values to 45

[winteregel]

That fixed the first two notes, but the latter one is still a bit messed up.
Either way, I think I’m going to keep the messages short (in between first and second note), perhaps trim down the line-height a bit, and there’s a "read more" link anyways, so perhaps I can automatically limit the length of the paragraph in php

So unless you’ve made another breakthrough, thanks a bunch for your help and insight!

[noahgelman]

Sorry, no break-throughs, but your very welcome.

[Author]

Posts