RH 2020 Update 5 - how to get a background image in a topic

Participant ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

I want to add a background image to my front cover. I try specifying an image path in background for my topic but it does not display the image. When I went to the source I saw that it added the background-image to a pargraph. So I moved it to the body and now the image displays in the topic in RH but when I preview it or generate the PDF, the image is not there.

 

I can add the image to the topic but then I cant get the size right because it just sits in the corner of the topic underneath the title, which is not want I want.

 

Views

135

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

correct answers 1 Correct Answer

Adobe Community Professional , Jun 25, 2021 Jun 25, 2021
Thanks to Adobe this seems to work. Add this to your CSS div.mybgdiv { min-width: 100%; height: 2000px; max-height: 100%; background-image: url("background.png"); } The height can be whatever you want in px but it must be sufficient for all the content. It's about the page rather than the image, to the best of my knowledge. The name of the div can be whatever you want. In the cover page topic add the two lines shown. For the image I used, that worked. _______________________________...

Likes

Translate

Translate
Adobe Community Professional ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

I created a topic to use a coverpage and when I add an image in Properties I see the image sitting on top of the title but only showing a small part.

image.png

 

I have taken this up with Adobe and will let you know what comes back. However, it does look like there is a bug.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Adobe Community Professional ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

It seems background is not the same thing as a watermark. It is background for a paragraph, hence what you are seeing is correct. In my image below it is a background to H1 in the topic and you are not seeing the title as the background is dark. You would see it if the image was a pastel colour.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Adobe Community Professional ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

... however, there is a way to add a background image. Obviously it will need to be light enough to read the text on top.

 

I found this on the web How to add Background Image in Html - javatpoint

 

Add background-image to the body tag in the CSS file.

 

body {
background-image: url("your-image-name.png");
}

 

This assumes the image is in the CSS folder. Otherwise you need the relative path.

 

It works for both online and PDF. If you only want it in one output, copy your CSS and just use the copy with the tweak for PDF. Add it to the master page?

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Adobe Community Professional ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

To get the image just on the coverpage, use a separate CSS for that.

Correction. That will not work for just the coverpage. Adobe have sent me something that I am trying now.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Participant ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

I trid adding background-image to the body tag but I got errors when I tried to do body {}  The only way I could do it was using:

<body style="background-image: url(image;)">

but then the image displayed in RH but not in the PDF.

So if I was using a separate CSS, what would I have in the separate CSS? Background-image? 

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
Adobe Community Professional ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

As I have indicated, my initial responses will put the background into every topic, not just the coverpage which I believe is what you want.

 

So far I have not got a method of making the background image work only on the cover page using the code Adobe sent me.

 

Unless you do want the background image on all pages, I am sorry but you will have to wait until Adobe come back to me again and that may not be until Monday.

 

If all pages is OK, then the following in the CSS worked for me

body {
background-image: url("your-image-name.png");
}

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Adobe Community Professional ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

Thanks to Adobe this seems to work.

 

Add this to your CSS

div.mybgdiv {
min-width: 100%;
height: 2000px;
max-height: 100%;
background-image: url("background.png");
}

 

The height can be whatever you want in px but it must be sufficient for all the content. It's about the page rather than the image, to the best of my knowledge.

 

The name of the div can be whatever you want.

 

In the cover page topic add the two lines shown.

 

image.png

 

For the image I used, that worked.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Adobe Community Professional ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

I have amended the height to 2000px which is way more than is needed. It will then fill the height of the page but not spill over as the max-height will kick in.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Participant ,
Jun 28, 2021 Jun 28, 2021

Copy link to clipboard

Copied

LATEST

Once again, thank you so much for all your help on this Peter.

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