7 Replies Latest reply: May 7, 2012 7:11 AM by MM Acton RSS

    PNG in shaded area

    r.laviolette

      I've added a shaded area into a topic and then added a png image into that area.  The background of the image is not the same as the shaded area.  I know the

       

      Is this by design or am I doing something wrong?

       

      Thanks!

        • 1. Re: PNG in shaded area
          Amebr Community Member

          You will have to edit your image in your image editing tool and specify that the background colour is to be transparent. How you do it will depend on the tool, but look for menus like "Set palette transparency" and an option "Set the transparency value to the current background colour". Most tools also let you manually specify a colour/palette location but if your background colour is not used elsewhere in your image, the option I mention above is the easiest way.

          Amber

          • 2. Re: PNG in shaded area
            r.laviolette Community Member

            Amber,

             

            The image is already transparent.  I've been able to us it in other applications without problem.  I'm thinking its a bug within RoboHelp 9.

             

            Here it is within RoboHelp:

            Image1.gif

            Here it is in a generated PDF:

            Image2.gif

            I would think that the experience should be identical.

             

            Thanks,

             

            Rene.

            • 3. Re: PNG in shaded area
              MM Acton Community Member

              What does the HTML look like just before and after the image?

              • 4. Re: PNG in shaded area
                r.laviolette Community Member

                Here is the code after adding the shading:

                 

                <p style="background-color: #c0c0c0;">To remove the system from your computer,

                select <span style="font-style: italic;">Add/Remove Programs</span> from

                the Control Panel. &#160;If you are using Windows Vista, select <span

                     style="font-style: italic;">Programs and Features</span> from the

                Control Panel. &#160;A selection will exist for Costimator. &#160;Select

                Costimator and click the <span style="font-weight: bold;">[Add/Remove]</span>

                button. Follow the on-screen instructions to remove the software.</p>

                 

                Here is the code after adding the image:

                 

                <p>&#160;</p>

                <p style="background-color: #c0c0c0;">To <img src="Info_16.png" style="border: none;"

                                                                 alt="" border="0" /> remove

                the system from your computer, select <span style="font-style: italic;">Add/Remove

                Programs</span> from the Control Panel. &#160;If you are using Windows

                Vista, select <span style="font-style: italic;">Programs and Features</span>

                from the Control Panel. &#160;A selection will exist for Costimator. &#160;Select

                Costimator and click the <span style="font-weight: bold;">[Add/Remove]</span>

                button. Follow the on-screen instructions to remove the software.</p>

                 

                Here's what it looks like after adding the image:

                Snap10.gif

                 

                Thanks for your help!!

                • 5. Re: PNG in shaded area
                  Willam van Weelden ACP/MVPs

                  Hi,

                   

                   

                   

                  Which version of RoboHelp are you using? Do you see this behaviour only in the Design editor or also in your output? RoboHelp 8 doesn’t show transparent PNG’s correctly in the design editor, but they work in the output.

                   

                   

                   

                  Greet,

                   

                   

                   

                  Willam

                  • 6. Re: PNG in shaded area
                    r.laviolette Community Member

                    I'm using RoboHelp HTML 9.0.2.271

                     

                    It's showing this way in the Design editor.  If I generate a PDF (Printed Documentation), it appears fine.

                     

                    Thanks.

                    • 7. Re: PNG in shaded area
                      MM Acton Community Member

                      I'm using RH version 9.0.2.271 and I just copied your code into a help topic. I changed the image file to one on my own system. I get the same results. This happens in Designer, in the preview (eyeglass icon), and the HTML Help version.

                       

                      So then I took a normally functioning paragraph elsewhere in the topic. I added my image to that, then highlighted the paragraph and applied a grey highlight. I had the same problem you did; my image, even though I thought it was a transparent image, is white.

                       

                      Finally, I took a .PNG image, opened it in SnagIt, and saved it as GIF, making sure that I marked transparency and chose the color to be transparent. This worked.

                       

                      I did a Google search on ".PNG not transparent" and there were a lot of hits, but I didn't investigate them.