How to use a background image?

HM5 served us well, now its time has come and it has been replaced... If you have HM5 questions, please post them here.

Moderators: Alexander Halser, Tim Green

Post Reply
Alex Gurevich
Posts: 18
Joined: Wed Feb 22, 2012 6:50 am

How to use a background image?

Unread post by Alex Gurevich »

Dear Colleagues!
Is it possible to put a background image on the first page of a help file?
We use the “Help and Manual” program and we publish our helps in the CHM format.

I have found in the context menu of a page a following command: Change Topic Background.
There is a Tab called “HTML Source Code”. Is it possible to put a background image somewhere in this Tab?
The code of this Tab is following:

Code: Select all

<%DOCTYPE%>
<ht ml>
<head>
   <title><%TOPIC_TITLE%></title>
   <met a name="generator" content="Help & Manual" />
   <met a name="keywords" content="<%TOPIC_KEYWORDS%>" />
   <met a http-equiv="Content-Type" content="text/html; charset=<%DOCCHARSET%>" />
   <met a http-equiv="Content-Style-Type" content="text/css" />
   <li nk type="text/css" href="<%STYLESHEET%>" rel="stylesheet" />
</head>
<body style="margin: 0px 0px 0px 0px; background: #339966;">

<IF_TOPIC_HEADER>
<table width="100%" border="0" cellspacing="0" cellpadding="5" bgcolor="#CCFFCC">
  <tr valign="middle">
    <td align="left">
      <%TOPIC_HEADER%>
    </td>
  </tr>
</table>
</IF_TOPIC_HEADER>

<!-- Placeholder for topic body. -->
<table width="100%" border="0" cellspacing="0" cellpadding="5"><tr valign="top"><td align="left">
<%TOPIC_TEXT%>
</td></tr></table>

</body>
</html>
Would you like to give us some advices.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: How to use a background image?

Unread post by Tim Green »

Hi Alex,

The location you have found is the HTML topic page template, which can be accessed in Configuration > HTML Page Templates in the Project Explorer on the left. You can add a background image to this page, but then it will display in EVERY page in your help, because the template is used for all your topic pages. Theoretically, you could create an additional template, assign a background image to it and then attach that template to the topic where you want to have the image. But that is quite complicated -- particularly if you are using a skin. Then you have to create a copy of the custom skin code for the additional template and also create a copy of the additional template in your project as well so that you can select it in your project.

For a background in a single page, there is a much simpler option: Just add the HTML code for the background image directly to the topic itself. This method will work directly with the standard skins included with Help & Manual, but it needs to be modified if you are using a Premium Pack skin.

First, choose your background image and add it to your project's baggage so that it will be available for use in HTML pages. The name of this file must NOT contain any spaces or special characters, otherwise it won't work! It must be a GIF, JPG or PNG file. To do this, navigate down to Project Files > Baggage Files > Baggage in the Project Explorer. Then select Add File in the Project Tab and select the background image file to add.

Then select the topic where you want the image to appear. Click right at the beginning of the page, before any text. Then select the HTML Code Object tool in Write > Insert Object. It's the tool that looks like this [<h]

Then enter this code into the editing box of the Code Object tool:

Code: Select all

<style type="text/css">
body {
        background-image: url('yourimage.png');
        background-position: left top;
        background-repeat: no-repeat;
        background-attachment: fixed;
}
</style>
Replace 'yourimage.png' with the name of your background image file. You can adjust the settings in the three lines after this to suit your needs. See these pages for information on the settings you can use:

Background position:
http://www.w3schools.com/cssref/pr_back ... sition.asp

Background repeat (repeat image horizontally and/or vertically):
http://www.w3schools.com/cssref/pr_back ... repeat.asp

Background attachment (image stays put or moves with the content):
http://www.w3schools.com/cssref/pr_back ... chment.asp
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Alex Gurevich
Posts: 18
Joined: Wed Feb 22, 2012 6:50 am

Re: How to use a background image?

Unread post by Alex Gurevich »

Thank you very much, Tim!
Post Reply