Known Participant

Question

Background images in layout won't generate

Forum|Forum|1 year ago
August 1, 2024
7 replies
656 views

I have an background image inserted into the top of my welcome page through the layout assigned to the topic. (The image is actually references in the layout.) When I generate, I always get the message that the image failed to copy.
Image in code:
<div data-region="Header" style="background-image: url('../images/banner.png');background-size: 100%;background-repeat: no-repeat;background-position: center top">

Error I get:

Skipped copying external file "c:/Output/SampleProject/images/banner.png"

I have added the image to another topic ot make sure it is not labeled as an external file, but I still get the error. The page with the topic shows the image. The Welcome page which should have the same image through the layout that is applied, does not have the image. It shows the rest of the layout though.

Windows 10

RoboHelp Version 2022.3.93

This topic has been closed for replies.

Peter Grainge

Community Expert

Would this approach help?

Item 34 at https://www.grainge.org/RoboHelp_Gems/RoboHelp_Gems.htm#content_creation

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

@Eric J. Technical Writer It's working in a topic but not a topic layout, correct?

If so, then I'm back to suggesting Support. Sorry.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

Searching on "add background image in html" seems to suggest background-image is not supported in HTML5. The new UI versions apply strict HTML5 and CSS3. Perhaps that's the issue? My knowledge in this area is limited.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Jeff_Coatsworth

Community Expert

https://www.w3schools.com/html/html_images_background.asp says it works by styling the body element

E

Eric J. Technical WriterAuthor

Known Participant

I am generating in Frameless but the result is the same in Frameless and HTML5.
The steps are that I am adding a div to the header of the layout. I then apply a background image to it, make my adjustments on size and location. Then I add text to div and that should work.
I have found that if I do the same thing inside of the Welcome Page then it works. It does not work when I do it to the layout and then apply the layout to Welcome Page.

Code that works on Welcome Page but not on Layout:
<div data-region="Header" style="background-image: url('../assets/images/Banner.png');background-size: 100%;background-repeat: no-repeat;background-position: center top">
<p class="BodyText"> </p>
<p class="BodyText"> </p>
<p class="BodyText"> </p>
<p class="BodyText"> </p>
<p class="BodyText"> </p>
<p class="BodyText"> </p>
<h1 class="SplashH1"><span class="Salt">How can we help?</span></h1>
<p class="BodyText"> </p>
<p class="BodyText"> </p>
<p class="BodyText"> </p>
<p class="BodyText"> </p>
<p class="BodyText"> </p>
<p class="BodyText"> </p>
</div>

Peter Grainge

Community Expert

Your image is applied to a topic layout, correct?

What are the exact steps you have followed so that I can replicate them?

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

Agreed. Ask them. See https://helpx.adobe.com/contact/enterprise-support.other.html#robohelp for your Adobe Support options. The email link tcssup@adobe.com is recommended as it reaches a team dedicated to Technical Communication Suite products including RoboHelp.

________________________________________________________
My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

Error I get:

Skipped copying external file "c:/Output/SampleProject/images/banner.png"

The second path suggests that the link is seeing the image as being outside your project. In the topic it will show as a relative path as in the first reference above but the generation process is seeing that from the home page it is not seen as part of the project.

I think someone at Adobe did advise me that background images are not supported but it looks like you are close. Can you edit the code in the output home page to fix the link?

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

E

Eric J. Technical WriterAuthor

Known Participant

I get that it is seeing it as outside the project. Not sure why other than RoboHelp is buggy. I have not considered fixing the link post generation because we have 6 writers on different projects that this would affect individually so we would have to intervene on ever generation across multiple projects releasing quite often.

Adobe RoboHelp has Background built into it. not sure why they wouldn't support it.

Jeff_Coatsworth

Community Expert

Does "/images/banner.png" exist in that spot in the source RH project?

E

Eric J. Technical WriterAuthor

Known Participant

Yes, and if I refer to the image in other topics, it will show up in those topics, but still not in the welcome page. I can get the image to show up in the layout page with no problem. But on the Welcome Page where the layout is applied it will not show up and the image is listed as not copied over in the generation log. Other instances of the image are fine.

Jeff_Coatsworth

Community Expert

Can you post a screenshot of the "Welcome Page"? I'm not clear whether it's a topic that you're nominating as the default topic or the TOC page that's generated in the output.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded