Border-Image Property for Layout - Long Form Sales Copy Page

[etidd]

Hi Ronpat and everyone at Sitepoint,

There hasn’t been much of a peep from me lately, but I’ve been around reading posts over the last several weeks. I have a new page that I am building for the firstratefreight.net project we discussed last November. This is the Shipping Guide that I have written to be published in a HTML/CSS format. This is what it looks like in PDF format. It took me a few months to compose.

Surely, there won’t be many people reading most of the content other than the bold-printed lists and section titles, but I believe this guide will add a lot of quality filler content to make my shipping website look more complete. It would seem there will be a lot of CSS styles for the tables, lists, image floats throughout the page. Is that going to be too much for the file sizes? It would seem this CSS file will get quite lengthy and quickly so.

So, I have started to code this page, and I’m already incorrectly applying the border-image property for the background. The image file, sgbg.png, is 400 x 400px, and I have assigned a border of 200px. The design concept for the simple website is centered around the green fancy bar that works well on the main page as it is also applied with the border-image property, but the following styles do not make the fancy bar connect nicely:

.outer {
	border:200px solid transparent;
	border-image:url("../images/sgbg.png") 100 repeat;
}

If I give the border-image-repeat property a value of stretch, I get a “stretched out” one (obviously) that doesn’t repeat itself like the above code results in. Is the size of the border, 200 px, the cause of the unaligned fancy bar? Hopefully, I can find this out on my own. It seems simple.

Will look forward to solving this problem and others as I code through this Shipping Guide.
Thanks for your input in advance.

God Bless,

-ty

[etidd]

I actually found the solution.

It needed to be changed to this:

.outer {
	border:200px solid transparent;
	border-image:url("../images/sgbg.png") 120 repeat;
}

…but why?

[m_hutley]

Because if i take a 100x100 slice of your border image, it looks like this:

but if i take a 120x120 slice of your border image, it looks like this:

border-image slicing (that 100 you’ve got there) says… "slice my image into 9 sections: the corners are YxY, the edges are Yx(Width-2Y) or (Height-2Y)xY (depending on the edge in question), and the center is the rest of it. Discard the center (unless told to Fill), put the corners in the corners, and then repeat the edges as necessary.

EDIT: I should say border slicing with a single value. It is of course possible to set border-image-slice with up to four values, representing the four gutters (top, right, bottom, left) or any of the standard CSS combinations thereof (all, topbottom leftright, top leftright bottom, or top right bottom left.)

[etidd]

Wow! What an excellent response, m_hutley!

If I am correct, I can even add that border-image-slice only accepts a unitless value or a percentage value. I’m assuming that the unitless value implies pixels as units.

[m_hutley]

For raster images, the numbers are pixels; for vector graphics, it’s coordinates.