How can I get background-images from CSS to appear in printable output?

[Jared Hess]

We're using the latest RH 2015. I have a Windows 10 x64 bit computer.

In our help projects we added images as background images onto our note box styles (notes, warnings, cautions, hints etc.). Here's a portion of our CSS:

.Important, .ImportantLong {
    background-image: url(important.png);
}
.Example, .ExampleLong {
    background-image: url(example.png);
}
.Hint {
    background-image: url(hint.png);
}
.Caution {
    background-image: url(caution.png);
}
.Warning {
    background-color: #D8292F;
    background-image: url(warning.png);
    border-color: #000000;
    color: #ffffff;
}

In the our htm pages it renders like this:

Here's the HTML code if you're interested:

<div class="droptext" id="POPUP717251270" style="display: none;">
    <p>Throughout the documentation, you'll find special boxes that offset 
     the documentation. Here is what they mean:</p>
    <p class="Note">This indicates a note.</p>
    <p class="Important">This indicates an important note.</p>
    <p class="Hint">This indicates a hint.</p>
    <p class="Example">This indicates an example.</p>
    <p class="Caution">This indicates a caution. Failure to follow a caution 
     may result in data loss or hardware damage.</p>
    <p class="Warning">This indicates a warning. Failure to follow a warning 
     may result in bodily harm.</p>
</div>

When I generate the printed output, on the appearance dialog box, I choose the project's css:

But in our printed documentation, the background images do not appear:

This poses a major concern since we use this style sheet across multiple projects and have hundreds of these note-box styles. Any suggestions?

[Gravenstein]

I have the same problem, with an almost identical situation, only my css note styles use pseudo-elements instead of background images:

.Note-Tip::before {

  content: url("tip_icon.png");

}

Suggestions appreciated here, as well.

Thanks,

G.

[Jared Hess]

Unfortunately, after looking at the "More Like This" links on the sidebar, it looks like this is a bug that has been around for some time.

I've filed a bug report here on this:

Bug#4188946 - Printable output does not support CSS background images

Everyone, please vote on this, so this gets resolved.

I hope someone has some workaround ideas, because sending documentation out as is will not look good.