Question

Just wondering how to style a header like the attached image. Was thinking of using two divs, the left for the text and the right for the horizontal repeating image. Problem is I need the right div’s width to change with respect to different header lengths.

Any help would be appreciated!

header image

Answer 1

You can do that in simple;

.header{
    width:100%;
    height:20px;
    background:url('http://jsfiddle.net/favicon.png') repeat;
}
.header span{
    background-color:#FFF;
    display:inline-block;
    height: 20px;
}

<div class="header"><span class="title">Header Text</span></div>

You can include this in various pages and the title space re-size accordingly.

Here is a working Live Demo