Background images in layout won't generate

[Eric J. Technical Writer]

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(&#39;../images/banner.png&#39;);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

[Jeff_Coatsworth]

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

[Eric J. Technical Writer]

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]

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.

[Peter Grainge]

<div data-region="Header" style="background-image: url(&#39;../images/banner.png&#39;);background-size: 100%;background-repeat: no-repeat;background-position: center top">

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.

[Eric J. Technical Writer]

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.

[Peter Grainge]

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.

[Peter Grainge]

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.

[Peter Grainge]

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.

[Jeff_Coatsworth]

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

[Eric J. Technical Writer]

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(&#39;../assets/images/Banner.png&#39;);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]

@Jeff_Coatsworth Try it. 🙂 I can't get it to work and elsewhere I saw it is not valid in HTML5.

________________________________________________________

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

[Peter Grainge]

@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.

[Peter Grainge]

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.