Skip to main content
M
mkcoffee
Known Participant
October 9, 2014
Question

Image in master page header

  • October 9, 2014
  • 1 reply
  • 2809 views

RoboHelp 11

I'm trying to use our company logo and another image (as background) that should repeat across the header. The logo should display on the left with the 'background' image tiled across the page. I'm assuming the logo should 'sit' on top.

I've looked at ww3 and found this example

Set a background-image for the <body> element:

body {
     background-image: url('paper.gif');
     background-color: #cccccc;
}

Also there's the background-repeat property. Based on the descriptions, it sounds like this is an approach that should work.

But I don't know how or where to use the information. Do I need to edit the master page header placeholder or the project CSS or both? Or is there a better/preferred way?

This topic has been closed for replies.

1 reply

Willam van Weelden
Willam van Weelden
Inspiring
October 10, 2014

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

M
mkcoffeeAuthor
Known Participant
October 10, 2014

Thanks for the quick response. I’m still a little confused. I’m trying to do this in the header placeholder on the master page for the WebHelp project. I don’t understand the relationship (if any) between the master page (its elements) and the CSS. According to RoboHelp 11 help, I should be able to put an image in the master page header placeholder so that the image displays on every topic that is ‘associated’ with the master page. I also read the discussion regarding the change from templates to master pages. I thought I understood that master pages allow you to make a change on the master page and it is applied to all pages using that master page.

This is a very confusing issue to me.

Thanks, Mary

Mary Coffee

Lead Technical Writer

Captiv8r
Captiv8r
Legend
October 10, 2014

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices