How to start a background image after the text ends

HTML & CSS
21

Good try but that isn’t working as required:)

The background image needs to start after the text and not simply be rubbed out by it. The image starting point should be where the text ends.

The problem with this approach (and the others above) is that it fails on multi-line headings.

No our examples work fine on multi lines just by using line-height in stead of height.:slight_smile: The image always starts after the text stops.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
    xmlns="http://www.w3.org/1999/xhtml"
    lang="en"
    xml:lang="en"
><head>

<meta
    http-equiv="Content-Type"
    content="text/html; charset=utf-8"
/>

<meta
    http-equiv="Content-Language"
    content="en"
/>

<title>
    image after text demo
</title>
<style type="text/css">
p {
    overflow:hidden;
    line-height:25px;
    zoom:expression(
        runtimeStyle.zoom=1,
        insertAdjacentHTML('beforeEnd','<span class="after"></span>')
    );
}

p .after,
p:after {
    content:" ";
    display:inline-block;
    width:999em;
    height:25px;
    margin:0 -999em 0 0.4em;
    vertical-align:middle;
    background:red;/* apply your image here */
}
</style>

</head><body>

<p>This is the text This is the textThis is the textThis is the textThis is the textThis is the textThis is the textThis is the textThis is the text</p>

</body></html>
22

Aye, needs to slide over with the text width – at least that’s how I interpreted OP’s question. At first I thought the same solution as eruna – but I always read posts twice because it’s easy to miss small details like that.

23

My mistake I’ll have to read it closer next time.