There are many ways to create a block of content with an image border around it. The easiest way is to make a background image and set it to the specific width and height you need, but this way the dimensions are set. To allow it to expand with the the text vertically, specifying the width of a background image and having 2 elements sharing the image for the top and bottom would also be a viable solution. The problem I came across was when I need to make multiple boxes with the same image border but with each having a different width and height. I needed the boxes to be scalable, have the least amount of images as possible, and for the code to be valid. The solution is explained below.
Step 1
Firstly, the markup. To make the box scalable in all directions, I’d have to use a div for each side of the box. These divs would be nested in a wrapper which determined the width. After the markup, we’re going to use CSS to add a background and position to each div in order to create a seamless border.
<div class="border-box"> <div class="top-left"> <div class="top-right"> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="bottom-left"> <div class="bottom-right"></div> </div> </div>
Step 2
Next we need to add the CSS to position the nested divs correctly to allow the border to appear. As you’ll notice that the same large image being used for each div. It is being positioned according to what part of the background is visible. Padding is used to allow space around the content.
.border-box {width: 960px;} .border-box .top-left, .border-box .top-right, .border-box .bottom-left, .border-box .bottom-right { background-image: url(../img/bg-box.gif); background-repeat: no-repeat; } .border-box .top-left { background-position: left top; } .border-box .top-right { background-position: right top; margin-left: 10px; padding: 20px 20px 10px 10px; } .border-box .bottom-left { background-position: left bottom; } .border-box .bottom-right { background-position: right bottom; height: 10px; margin-left: 10px; }
This is another variation using a different image border.
Additional Resources
Here is a similar approach from an article on Web Designer Wall. Their sample uses negative margins in addition to padding instead, but still works flawlessly. I’ve also grouped the box selectors so that you can change the background image all in one place.
The guys over at From The Couch have a good video tutorial for rounded corners. Their tutorial also allows a box to be flexible and scalable.
Whichever one of these methods you use it should get you the results that you are looking for.
munkiu
March 11th, 2009
wow, this is so great… nice done
Thomas
March 31st, 2009
This is great
Krunal Shah
April 6th, 2009
nice one…
Please let me know the updates
Scott Klarr
May 11th, 2009
Hmm, It appears the HTML I entered in my last comment was removed. Let’s try this again:
The whole point of using CSS is to separate content from styling. By using a bunch of divs called top-left, top-right, bottom-left, etc, you are defining style-related information in the source – you might as well just be using tables.
A much better method that is more compliant and easier to modify in the future is to use layer wrappers. For example:
<div class=”boxWrapper1″><div class=”boxWrapper2″><div class=”boxWrapper3″><div class=”boxWrapper4″>
content here
</div></div></div></div>
And then onion-wrap the sliced elements using css. Element wrapping can also be done on the fly via javascript so your raw source remains as clean as possible.
Jaon
September 4th, 2009
Yet another example that is not worthy of “real” design. This example does not show true image (8 picture) boxes that scale with differing content. What’s worse… it is too high on the search engine list as there are no real examples available. I would like to see an example from Scott Karr as he seems to have a better grasp of “real-world” design.
George
October 27th, 2009
Well yes, it works, but it doesn’t help me work out how to have an image as ONLY the bottom border of a div!