Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


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

Enthusiast ,
Sep 09, 2016 Sep 09, 2016

Copy link to clipboard

Copied

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:

css background images.jpg

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:

stylesheet option.jpg

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

printabl_output_problem.jpg

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

TOPICS
Documentation

Views

270

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Sep 09, 2016 Sep 09, 2016

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Sep 13, 2016 Sep 13, 2016

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation