fill border with pattern or image?

border, css, html, image

Solution

here I'm using a `<div>` to show the border behind the `<h1>` category where both the `<body>` and `<h1>` have matching background patterns (that are also lined up)

example jsfiddle

CSS

body {
    background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png');
    font-family:helvetica,arial,sans-serif;
}

#container {
    margin:0 20px;
    position:relative;
}

h1 {
    position:relative;
    float:left;
    padding-top:6px;
    padding-right:20px;
    font-size:2em;
    background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/gray_jean.png')
}

.border {
    background:url('http://s3.amazonaws.com/creattica/uploaded-images/0016/6142/patterns_009_blue-hexagon-pattern_crop-iphone_web_for-creattica.jpg') repeat-x -10px 0;
    position:absolute;
    top:20px;
    width:100%;
    height:3px;
}

.listings {
    clear:both;
}
​

HTML

<div id="container">
    <div class="border"></div>
    <h1>Catering</h1>
    <div class="listings">
        <ul>
            <li>
                Catering Company 1
            </li>
            <li>
                ...
            </li>
        </ul>
    </div>
</div>​

Problem

I have a list of businesses separated by categories. Next to each category name, starting at about 20px apart, I'd like to have a 3px tall border stretching to the end of the div. I would like for that border to be filled with a pattern, or image. Initially, I tried just using an image, but as each category name is a different length, that proved to be impractical. I'm sure there is a relatively easy way to go about this, I'm just not certain on how to make it happen. Ideas? Thanks. updated image

Original source