Image in master page header

Normally, you add this to the CSS of the page having this image. Depending on the output you're creating (WebHelp?), most of the time in the topic CSS.

With background repeat, use:

body {

     background-image: url(myimage.png);

     background-color: transparent; /* A colour and an image together may not play nice. Use transparent if you have a repeating image unless you really need a specific colour. */

     background-repeat: repeat-x; /* This setting only repeats horizontally. For repeating only vertically, set repeat-y. For repeating in both directions, use repeat. */

     background-position: left top; /* You can also give the numbers of pixels from the left and top to position the image. */

}

Kind regards

To accomplish this via the RoboHelp UI:

From the Project Manager pod, find the CSS file. Depending on the view you have it configured for, you may find it inside a "folder" named Style Sheets, or it may simply be listed among your other files.

Right-click the file and choose Edit.

Now expand the "Other" category. Usually it's at or near the bottom of the list.

Now click Background + Text (BODY)

In the lower left corner of the dialog, click the button labeled Format, then choose Borders and Shading...

Now click the Shading tab.

In the Pattern area, click the spyglasses icon, then click the file browsing icon. Navigate to and choose the desired image.

Dismiss the dialogs until you are back to the Borders and Shading dialog.

Now you are able to configure the X and Y positions, control whether it repeats the image and whether the background is stationary or if it scrolls with the page.

Fun, eh?

As for the company logo, you are likely best to do that on the master page.

Cheers... Rick

Hi Mary

Hopefully I can shed a bit of light.

Master Pages used to be called Topic Templates. Just different names for the same beast really.

So these are used in two completely different ways. It depends on what you want to influence. Existing content or New content?

For Existing content, you edit a Master Page and configure the Header and/or Footer areas to contain what you want. Then you select existing topics and associate the Master Page with them. Poof! All the topics now sport what you put in the Header or Footer. If you decide later to adjust some aspect of the Header and/or Footer, the changes are propagated across all topics using that Master Page.

For New content, you configure the Master Page Body area to have a specific arrangement. Perhaps you are creating pages for a catalog. You always want an image as the first item in the upper left corner and a description in the right. So maybe you insert a table there with a placeholder for the image and text advising to replace it with the actual description.

Then as you add pages by creating topics, you tell the topic to use the Master Page. When the topic is created, a copy of that body placeholder is copied into the topic. And from there you edit as needed. Subsequent changes to the Body placeholder of the Master Page will have no effect on topics created using that Master Page.

Hope that helps a bit... Rick

Hmmm, well, see if this makes sense.

Imagine you have a piece of paper. You draw a form on it. You make a line for Name, one for Address, one for City, State, Zip and Phone. That form is exactly like the Master Page as far as the BODY area is concerned. When the paper form goes through the copier, it's identical to the original. But later, different names, addresses and such are added. Each copy is then different from the original.

Later, you decide you really should have added Email addresses. So you modify your source form. Just like you modify the BODY area of the Master Page. Now, any NEW copies of the form will have a spot for the Email address, but existing copies are untouched. Likewise, new topics created from the Master Page will sport the new info, but the existing topics remain as they were.

The bottom line here is that the ongoing relationship is ONLY maintained for the Header and Footer areas.

Cheers... Rick

If it were me, I'd simply make the banner really wide. Then add the logo where you want so it is all a single image.

Perhaps Willam has some nifty CSS adjustment to accomplish what you want.

Cheers... Rick

Sorry, but nothing other than what I already suggested.

At this point, if you wish to continue and use the logo separate from the banner, you are pretty much at the mercy of CSS.

As I said, hopefully Willam will pop in to advise what to try from the CSS perspective. Or, you could just use Google to search for how to remove image margins in CSS. I believe you will find there are a few different adjustments. And not all browsers will treat it the same way.

Cheers... Rick

For CSS

img { margin: 0 !important; }

That removes all margins from all images. If you have a specific image, you can do the following in HTML:

<img src="myimage.png" style="margin: 0 "/>

The thread is becoming a bit convulated so I'm not sure what your requirement is exactly. It started with a background image, so I'm unsure what you need at this point.

Kind regards,

Willam