CSS3 Border Images tutorial
Border images can be really useful if you can wrap your mind around using them. I have put together a little something something to help out.
First you need to create the image you want to use for the background I am going to use a really basic one so its easier to understand.
and here is the result
So what you are seeing here is an image being stretched to fit the background of the of the container which has a dynamic width and height derived from its content.
Its important to declare a border width and keep in mind browsers that won’t support border-image (we all know what I am talking about).
Let me show you the code:
section{
border-width:25px;
-moz-border-image:url("bg-img.png") 25 25 25 25 stretch;
-webkit-border-image:url("bg-img.png") 25 25 25 25 stretch;
border-image:url("bg-img.png") 25 25 25 25 stretch;
}
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
The image is being sliced 9 times, you define those slices by the numbers declared after the image. top, right, bottom, left is the order for the declarations. You then define either stretch, repeat, or round to determine how you want it to display. You can declare this once or twice, once will cover top, right, bottom, and left, twice will target first the top and bottom and then left right.
This is not meant to be an exhaustive description, but rather something to wet your appetite. There is bit of magic for the end results and I think the best thing to do to understand it is to just start playing with it. Here is a great demo that lets you tamper with things.
The thing to take away is how powerful this could be. I try my best to just keep these new approaches on deck with I am thinking about building a new project, rather than resort to older less efficient ways.
Stack overflow also has a nice Pros and Cons list going you should check out.