Image background in CSS not displaying on Kobo

I have created my own epub version of "The Book of Tea" and am having troubles with chapter headings. What I intend is the chapter number (in Roman numerals) followed by its text and a period (e.g. II. The Schools of Tea.) over-top of a decorative underline (a GIF file).

The textual parts view fine in Sigil, ADE and Calibre and on my Kobo reader. The underline is present except on the Kobo.

The CSS for the header is:

#content h3 {
	text-transform: uppercase;
	text-align: center;
	margin: 1.5em 0 1.5em 0;
	font-size: 1.8em;
	line-height: 1.5em;
	letter-spacing: .1em;
	padding-bottom: 0.75em; /* space between text and image */
	background: url('../Images/underline.gif') no-repeat bottom center;	
}

#content h3:after {
	content: "." 
}

and the epub file is attached.

I have searched and can find no exceptions to epub specs saying that the background: url... doesn't work on Kobo.

For those who might be willing to help:

1) does the underline display on other devices?
2) any thoughts about how to get the Kobo to display the underline?
3) or...?

Thanks,
Steven

[Jellby]

"text-transform", "letter-spacing" and "content" are not included in the ePUB specification, so if any reader supports them it's just a bonus, and you should actually count on their not being supported. If case and period are important, write the "II." directly.

[charleski]

You could try h3 with a left margin in % or pts so it remains invariant with font size and then use a very slightly larger left margin (also in % or pts) for a separate img carrying the underline gif. Varying the line-height on the img should give you enough control on its vertical position.
e.g.
<h3 class="chaphead">...</h3>
<div class="ornament"><img src="underline.gif" alt="" class="underlineimg"</img></div>

h3 {
margin-left: 35%; <-- alter to suit
...
}
.ornament {
margin-top: 0;
margin-left: 37%; <--alter to suit
vertical-align: top;
line-height: 0.5; <--alter to adjust vertical spacing
}

It's fiddly though, and This sort of fine-grained positional control not really supported by the css subset used in the epub standard. Might be easier just to render your chapter headings as images and embed those.