Background image stretch y-axis only, keep repeat-x

I had this problem too. It’s easy in most browsers, but IE8 and below it’s tricky.

Solution for modern (anything not IE8 and below) browsers:

#scroller_shadow {
    background: url(../img/ui/shadow.png) center repeat-x;
    background-size: auto 100%;
}

There are jQuery plugins that can mimic background-size for IE8 and below, specifically backgroundSize.js but it doesn’t work if you want it to repeat.

Anyways thus begins my terrible hack:

<div id="scroller_shadow">
    <div id="scroller_shadow_tile">
        <img src="https://stackoverflow.com/questions/15160764/./img/ui/shadow.png" alt="" >
        <img src="https://stackoverflow.com/questions/15160764/./img/ui/shadow.png" alt="" >
        <img src="https://stackoverflow.com/questions/15160764/./img/ui/shadow.png" alt="" >
        ...
        <img src="https://stackoverflow.com/questions/15160764/./img/ui/shadow.png" alt="" >
    </div>
</div>

Make sure to include enough <img>‘s to cover the area needed.

CSS:

#scroller_shadow {
    width: 500px; /* whatever your width is */
    height: 100px; /* whatever your height is */
    overflow: hidden;
}

#scroller_shadow_tile {
    /* Something sufficiently large, you only to make it unreasonably wide if the width of the parent is dynamic. */
    width: 9999px;
    height: 100%;
}

#scroller_shadow_tile img {
    height: 100%;
    float: left;
    width: auto;
}

Anyways, the idea is to create the stretch effect from the images.

JSFiddle.