CSS repeat-x仅适用于最右边的像素行

Question

We currently have our 145x45 header logo set as the background of our mobile header, and have the rest of the header's 'background-color' matching the background of the logo.

The logo has a line a few pixels high across the top of the image, which under the current configuration doesn't extend beyond the image.

How can I make the rightmost 1px(w) x 45px(h) of the logo to fill (repeat-x?) the remainder of the header, so that the line at the top of the image extends across the entire header?

Answer 1

Create a 1x45 image with the line, use with repeat-x in a div, place a div inside that div with the logo image like this:

<div style="background-image: url('line_image.png'); background-repeat: repeat-x: height: 45px;">
    <div style="background-image: url('logo.png'); background-repeat: no-repeat; height: 45px;"></div>
</div>

Sorry for inline CSS, should be in a .css-file.

PS: Code not testet, let me know if it doesn't work.