-moz-background-inline-policy on webkit

Question

Does something like -moz-background-inline-policy exist in Webkit? This property basically gives you the opportunity to specify how should background render for

Answer 1

This works, but it could probably be made more efficient:

http://jsfiddle.net/thirtydot/UGBXD/3/

Here's the complete code for posterity:

JS:

//thanks @Peter Bailey - http://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456582#2456582
jQuery.fn.wrapLines = function(openTag, closeTag) {
    var dummy = this.clone().css({
        top: -9999,
        left: -9999,
        position: 'absolute',
        width: this.width()
    }).appendTo(this.parent()),
        text = dummy.text().match(/\S+\s+/g);

    var words = text.length,
        lastTopOffset = 0,
        lines = [],
        lineText = '';

    for (var i = 0; i < words; ++i) {
        dummy.html(
        text.slice(0, i).join('') + text[i].replace(/(\S)/, '$1<span/>') + text.slice(i + 1).join(''));

        var topOffset = jQuery('span', dummy).offset().top;

        if (topOffset !== lastTopOffset && i != 0) {
            lines.push(lineText);
            lineText = text[i];
        } else {
            lineText += text[i];
        }

        lastTopOffset = topOffset;
    }
    lines.push(lineText);

    this.html(openTag + lines.join(closeTag + openTag) + closeTag);
    dummy.remove();
};

var fixIt = function() {
    $('.dummy').remove();

    $('div.node-title-text').each(function(index) {
        //remove previous .dummy
        var dummy = $(this).clone().removeClass().addClass('dummy').appendTo($(this).parent());
        $(dummy).wrapLines('<span><span>', '</span></span>');
    });
};
$(window).resize(fixIt).resize(); //trigger resize event onLoad

CSS:

.node-title {
    position: relative;
    margin-bottom: 16px
}
.node-title-text {
    position: relative;
    z-index: 2
}
.dummy {
    position: absolute;
    top: 0; left: 0;
    z-index: 1
}
.dummy > span {
    background: url('http://i.stack.imgur.com/HPofR.png') top left no-repeat,
        url('http://i.stack.imgur.com/C8ImH.png') top right no-repeat,
        url('http://i.stack.imgur.com/9is9r.png') top center repeat-x;
}
.dummy > span > span {
    visibility: hidden
}

HTML: (same as yours)

<div class="node-title">
    <div class="node-title-text">
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed suscipit fermentum leo eu scelerisque.</a>
    </div>
</div>

Answer 2

This non-standard feature isn't implemented in other browsers. You'll need to wrap each line in a span, then apply the background to that span.

You could use javascript to sort out the spans for you if you needed to have dynamic text, but if it's possible to hardcode it then it shouldn't be too complex.