How to start a background image after the text ends

**DaMarkov** · Jun 30, 2011 05:15

I'm looking for a CSS solution that would enable me to start showing a background image after the (title) text ends.

So that it would look like this:

So first title, followed by a background image that would start after the title text ends and runs all the way to the end of the line. The title length would change depending on the number of characters it contains.

Is there anyway this can be done using a single class element? I tried it using the sample on Verlee's blog but it doesn't quite work as I want it.

Any help would be greatly appreciated.

**alexson** · Jun 30, 2011 06:10

Hi,

I don't think you'll be able to given that the text is variable width.

If you wrapped the title in a div with a background image as you want, then gave the title a background colour of white that would stop the image going behind the text.

It's not as neat as I'd like, I'd be interested to know if there is a way of doing it...

Alex

**Paul O'B** · Jun 30, 2011 08:07

HI,

Welcome to Sitepoint

For IE8 plus you could do this:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
    height:25px;
    overflow:hidden;
    position:relative;
}
p:after {
    background:red;/* apply your image here */
    content:" ";
    position:absolute;
    width:999em;
    height:25px;
    margin:0 0 0 5px;
}
</style>
</head>
<body>
<p>This is the text </p>
</body>
</html>

Otherwise you would need an extra inner element to either rub out or supply the background

**Paul O'B** · Jul 2, 2011 03:31

The above works well in IE8+ but I don't really see a solution for ie7 and under without adding an extra element.

e.g.

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
    height:25px;
    overflow:hidden;
    position:relative;
}
p span {
    background:red;/* apply your image here */
    position:absolute;
    width:999em;
    height:25px;
    margin:0 0 0 5px;
}
</style>
</head>
<body>
<p>This is the text <span></span></p>
</body>
</html>

**zoom:1** · Jul 2, 2011 13:18

If you are willing to give overflow:hidden on the parent, I think that itcan be done in IE<8.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Bla bla</title>
<style>
h1 {
    display:list-item;
    list-style-position:inside;
    list-style-image:url(bg.png);
    direction:rtl;
    text-align:left;
    white-space:nowrap;
}
</style>
</head>
<body>
<h1>Bla bla</h1>
</body>
</html>

**Paul O'B** · Jul 3, 2011 03:57

Originally Posted by zoom:1

If you are willing to give overflow:hidden on the parent, I think that itcan be done in IE<8.

Good thinking

Yes that should work in IE6 and 7 with some caveats but needs to be hidden form other browsers otherwise you will lose the text if the image is too wide.

However it is clever thinking on your part and indeed back in 2006 we had a css quiz where the solution was similar (the second example in that post).

We could roll your example and mine together to produce a cross browser solution:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
    height:25px;
    overflow:hidden;
    position:relative;
    text-align:left;
}
p:after {
    background:red;/* apply your image here */
    content:" ";
    position:absolute;
    width:999em;
    height:25px;
    margin:0 0 0 5px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
p{
    display:list-item;
    list-style-position:inside;
    list-style-image:url(images/img.jpg);/* same image goes here */
    direction:rtl;
    white-space:nowrap;
        height:auto;
        overflow:visible;
}
</style>
<![endif]-->

</head>
<body>
<p>This is the text </p>
</body>
</html>

The caveats I mentioned that for this to work in IE<8 then the element must not have a layout which rules out dimensions and overlow and float etc. There is also the problem that you can't really fine tune the background position as you can with the background property but it may be good enough in some cases.

**zoom:1** · Jul 3, 2011 08:40

We could roll your example and mine together to produce a cross browser solution:

It is good to show that it is possible, but my solution is not that ideal, because I can't use sprites, unless I'm wrong.

As this decoration iss not that essential, I'd rather use css expressions for IE<8 and your code.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Bla bla</title>
<style>
h1 {
    overflow:hidden;
    position:relative;
    ruby-align: expression(
        this.runtimeStyle.rubyAlign = "auto",
        this.insertAdjacentHTML("beforeEnd","<b></b>")
    );
    width:100%;
}
h1 b, h1:after {
    background-image:url(bg.png);
    content:" ";
    position:absolute;
    width:100%;
    zoom:1;
}
</style>
</head>
<body>
<h1>Bla bla</h1>
</body>
</html>

**Paul O'B** · Jul 3, 2011 11:04

Originally Posted by zoom:1

It is good to show that it is possible, but my solution is not that ideal, because I can't use sprites, unless I'm wrong.

As this decoration iss not that essential, I'd rather use css expressions for IE<8 and your code.

That's another interesting solution.

I'm not usually keen on using expressions due to their performance overheads but it keeps the code quite tidy in your example.

You'll need a height on the absolute element and perhaps a small margin to give the text breathing space and I think we are done

Code:

<!DOCTYPE html>
<html>
<head>
<title>Bla bla</title>
<style>
h1 {
    overflow:hidden;
    position:relative;
    ruby-align: expression(
        this.runtimeStyle.rubyAlign = "auto",
        this.insertAdjacentHTML("beforeEnd","<b></b>")
    );
    width:100%;
}
h1 b, h1:after {
    background:red;/* image goes here*/
    content:" ";
    position:absolute;
    width:100%;
    zoom:1;
        height:100%;
        margin:0 0 0 5px;
}
</style>
</head>
<body>
<h1>Bla bla</h1>
</body>
</html>

**zoom:1** · Jul 3, 2011 12:07

I'm not usually keen on using expressions due to their performance overheads but it keeps the code quite tidy in your example.

I think that it is not quite true, because this expression overwrites itself and therefore is executed only once.

CSS expressions are the perfect tool to bring pseudo classes support or attach events in IE<8, if thay overwrite themselves.

On the other hand css expressions for min-width or position:fixed are not performant, because, by definition, they can't be overwritten.

You'll need a height on the absolute element and perhaps a small margin to give the text breathing space and I think we are done

Yes, you are right, ups.

**Paul O'B** · Jul 4, 2011 04:59

Originally Posted by zoom:1

I think that it is not quite true, because this expression overwrites itself and therefore is executed only once.

CSS expressions are the perfect tool to bring pseudo classes support or attach events in IE<8, if thay overwrite themselves.

Ah yes of course - I wasn't paying attention

**deathshadow60** · Jul 4, 2011 07:36

I use a slightly different approach.... Much like Paul's SPAN demo, but I use inline-block and a negative margin. I like to avoid APO when I can.

Code:

<!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;
	height:25px;
}

p span {
	display:inline-block;
	width:999em;
	height:25px;
	margin-right:-999em;
	vertical-align:middle;
	background:red;/* apply your image here */
}
</style>

</head><body>

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

</body></html>

**deathshadow60** · Jul 4, 2011 07:48

Just tossed together an expression version. I prefer to use zoom, since that's also a haslayout trigger

and if we're gonna use CSS to add the element, we might as well give it a class so you can go ahead and use other spans or b inside the tag in question. Oh, and you do NOT need to state "this" inside expressions, it is assumed.

Code:

<!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;
	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</p>

</body></html>

Look Ma, no Apo.

**Paul O'B** · Jul 4, 2011 10:09

Nice one Jason

I shall now delete this thread and save it for a quiz

(Just joking)

**Rayzur** · Jul 4, 2011 11:36

Originally Posted by Paul O'B

Nice one Jason

Yes, that is slick!

It reminds me of that little script Tommy wrote for ≤ IE7 in this counter reset thread.
Restart and ordered list - post#19

That has all kinds of possibilities for keeping the html clean when needing to support legacy IE. I could have used something like that to eliminate the empty elements I used in a recent example.

I would worry about JS being turned off for IE6/7 users either. Those folks won't being getting very far on the web without it.

**deathshadow60** · Jul 4, 2011 19:01

Originally Posted by Rayzur

I would worry about JS being turned off for IE6/7 users either. Those folks won't being getting very far on the web without it.

Thing is, that's worst case scenario; IE 6/7 without javascript enabled -- what's the damage? Oh noes, they don't get an extra presentational image... Is the functionality/usability of the page going to be hampered by this?

I think not. I may end up using this same technique for all my image replacements from now on -- if just IE7 and lower user with scripting disabled will get the plaintext instead of the image... Big honking deal.

**Rayzur** · Jul 4, 2011 19:39

what's the damage? Oh noes, they don't get an extra presentational image

Whoops, that was a typo in my last post. I meant to say "I wouldn't worry about..."

Yeah I was thinking the same thing too when I was thinking about JS off, big deal if IE<8 doesn't get a bg image. They still get a working page.

This is the recent example I was talking about that it would work well in. Once again, if JS is off IE<8 just wouldn't get v-a:middle text. Not a deal breaker as the page would still be functional.

**Paul O'B** · Jul 5, 2011 01:55

Originally Posted by deathshadow60

I may end up using this same technique for all my image replacements from now on -- if just IE7 and lower user with scripting disabled will get the plaintext instead of the image... Big honking deal.

That's a good idea and will do away with the extra elements in the html for those image replacement techniques.

Originally Posted by Ray

Whoops, that was a typo in my last post

lol - Yes I thought you had made a typo there

**DaMarkov** · Jul 9, 2011 03:02

Great ideas. Thanks guys!

**hugerewards** · Jul 11, 2011 18:50

I could have used something like that to eliminate the empty elements I used in a recent example.

**eruna** · Jul 11, 2011 20:42

Here's another variation:

Code HTML4Strict:

<style>
h1 {
height:20px;
background:url(path goes here);
position:relative;
}
 
h1 span {
position:absolute;
top:0;
left:0;
line-height:20px;
background:white;
}
 
</style>
 
<h1><span>Page Title</span></h1>

The problem with this approach (and the others above) is that it fails on multi-line headings. The solution uses slightly more markup. The assumption is that the background image is matched end to end vertically.

Code HTML4Strict:

<style>
h1 {
background:url(path goes here);
}
 
h1 strong {
float:left;
background:white;
padding-right:5px;
}
 
h1 span {
clear:both;
height:1px;
line-height:1px;
background:white;
}
 
</style>
 
<h1><strong>Page Title</strong><span></span></h1>

**Paul O'B** · Jul 12, 2011 00:49

Originally Posted by eruna

Here's another variation:

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.

The image always starts after the text stops.

Code:

<!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>

**deathshadow60** · Jul 12, 2011 08:57

Originally Posted by Paul O'B

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.

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.

**eruna** · Jul 14, 2011 06:01

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

User Tag List

Thread: How to start a background image after the text ends

Thread Tools

Display

How to start a background image after the text ends

Bookmarks

Bookmarks

Posting Permissions