I have a client who really, REALLY wants their redesigned site to have what we’ll call jagged borders on all their images and content boxes. We’re not talking about zig-zags; we’re talking about 3-year-old with a Sharpie. You can see this here. That whole site is build around this idea. But, I think the problems are obvious:
What is we add more content to that box than it’s made to hold?
What if someone changes the font size in their browser?
So, taste and what-not aside, is it possible to make something like this with CSS so I can use an image on the left and right and another on the bottom and top (or four different, either way)? Border-image doesn’t do it as far as I can tell.
I have seen worse requests. What I commend you for is your concern for scaling ( keep up the good work!). Now for the shame.
border-image doesnt have full native support /is not supported in some versions of some browsers. You may need to use a fallback, for graceful degradation.
Also, for some reason, people have trouble understanding how BI works.
BI makes a 9 tile hash(#) of any image. you can set any of the non corner tiles to : repeat, stretch, or round. some values work better than others depending on your actual image and intent.
Here’s where the SHAME comes in . This is an aesthetic thinking problem as much as it is CSS. True randomness is illusionary. You can make a ‘rough’ box 1.3x - 2.3x as large as the minimum needed, making sure that there is a REPEATING SEAMLESS PATTERN, and set the BI to round and it will appear to be nearly random and w/o much distortion of the original image. ( prime # are wonderful aren’t they?). Tho the effect would be less pronounced, repeat would work also
you could also try to do this semi-manually using MULTIPLE-BGs and image segments; that may leave some browsers out, but then again you probably would have more support of multiple BGs , than BI. Altho, coding a fallback may be tougher
if you are worried about cross browser support, you could just use multiple wrappers/image segments, as in the ‘days of old’.
Thanks for the welcome. My goal is to make a site that works. Sadly, I’m not much of a coder I’m finding. It’s been too long since I really dug into CSS/HTML - WordPress templates have spoiled me I guess. I usually build small, inexpensive sites.
Correct. Someday this sort of thing will have accepted standards AND everyone will follow those standards. Although, I’ve been saying printers should just work for more than a decade now… Not holding my breath.
Because it’s not simple. HTML and its cohorts are supposed to be. Also, it’s largely because it can’t do things like I’m trying for when at first glance it should. After all, it’s called “border-image”. huh, sounds like i could throw in a border for an image; that’s what the name implies. I bet it repeats - or not - like bg-image Wrong. I’m not whining (maybe a little) just saying how it caught me off-guard.
This sounds almost simple, but doesn’t seem to work for me with this jagged image. It seems to me that I should be able to make, say, 3 sizes of jagged borders at something like 150px, 400px, 900px and then use one that seems like it might remain close. Then I could use ‘stretch’ to either shrink or stretch it to fit a box. That doesn’t seem to work though. Am I missing something?
To me this seems most promising. In the end I’m testing with a 1000x1000px box. Problem is the fill cannot be transparent due to a white background with a big black spot over part of it. But, a fill does not fill behind content and a bg-color on the div doesn’t work at all because it makes a rectangle that extends beyond the border due to the jagged lines. I’m playing now with using a div for the border-image with some margin and a div inside that for the content that also has a white background. We’ll see… plus I had to deal with the .png halo effect from Photoshop, but PNG24 to the rescue…
So, you pointed me in the right direction and I may just get this to work. IE: ugh. I’ll cross that bridge later.
It’s easy enough to slice that image into three sections: top, a middle bit that can repeat, and a bottom bit. The key is to cut the images where the side part is always at the same point (middle) so that as the image repeats it will match up reasonably well with the next tile. All you can’t control is where the images meet up at the bottom, but as long as the side lines don’t sway around too much, this shouldn’t be too obvious. You then just have to live with the container having a fixed pixel width.
Do you mean you aren’t allowed to fix the width? If not, it’s more complex, but doable. You’d just need to split the top and bottom images, though with wavy lines like that, it’s hard to get everything to match.
Perhaps these days a better option is is to use CSS3, where the bg image can stretch and fill a container of any size. E.g. try this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {background-image: url(http://dairydoo.com/Morgan_Composting/Home_files/shapeimage_34.png);
background-size: 100% 100%;
width: 40%;
padding: 40px;
}
</style>
</head>
<body>
<div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</body>
</html>
It might distort the image a bit at various widths and heights, but it still works pretty well. Older browsers will be left in the cold, though.
. This is an aesthetic thinking problem as much as it is CSS. True randomness is illusionary. You can make a ‘rough’ box 1.3x - 2.3x as large as the minimum needed, making sure that there is a REPEATING SEAMLESS PATTERN, and set the BI to round and it will appear to be nearly random and w/o much distortion of the original image. ( prime # are wonderful aren’t they?). Tho the effect would be less pronounced, repeat would work also