Adding a page background image via css (RH8)

[Mark_Pud]

Hi all,

We've added a background image to appear on every page in the project, by specifying it in the css file which every page uses..

e.g.

body {
background-image: url("template_files/blue_snip.gif");
}

this works fine in terms of displaying the image in the built output, but...

When I build my output (WebHelp), it adds a "template_files" folder within every folder of the output, containing a copy of the background image.

I felt that this was a wasteful way of building, since I don't want 50+ copies of the same image in my output build, so my 2nd approach was to put a fixed URL in the css to point to the location on the server where the image is.. e.g.

body {
background-image: url("http://myserver/WebHelp/template_files/blue_snip.gif");
}

This works fine too, but now every time I work on a page in my project, when I press save I get a pop-up box saying:

Exception

Can't save local version of file 'http://myserver/WebHelp/template_files/blue_snip.gif' since there is no data in memory for it

This didn't happen in RH7..

Any ideas on how I can resolve this?

[RoboWizard]

Hi Mark

Normally we just specify the background image once in the CSS file. You then simply ensure that the image and the CSS exists in the root of the project.

Have you tried it that way?

Cheers... Rick

[Mark_Pud]

Hi Rick,

Yes, I have the background image specified once in the CSS, the only difference is that I store it in the "template_files" folder rather than the root.

Just out of interest I tried it with an image in the root of the project, and a link in my CSS as so:

body {

background-image: url("blue_snip.gif");
}

This does work visually, but when I examine the contents of my built project, I see a copy of "blue_snip.gif" in every folder.. which is just wasteful!!

[RoboWizard]

Hi again

Not sure that I can explain why it's happening. But surely the .GIF image isn't all that large is it? You say it's wasteful, and I suppose you are technically right about that. But is space so tight that this is causing a major issue with the project?

What happens if you perform a search and destroy of all the copies of the files in the assorted folders? (leaving the singular copy in the root level) Do things work then?

If they do, I might propose an alternative. Rename the image behind RoboHelp's back so it isn't found. Add the renamed image to the root folder in Baggage so it will end up in the root folder in the Generated output. Generate the help and after generating, renaming the image back to what it should be. That should leave behind a single copy of the image in the root folder and things should be dandy.

So I hear the arguments now.

But it should just work the other way! - And I would agree with you. However, the issue here is that for whatever the reason, it isn't. So we use workarounds and we report as bugs and hope it changes with the next release.

Cheers... Rick

Click here for Adobe Authorized Captivate and RoboHelp HTML Training Click here for the SorcerStone Blog Click here for RoboHelp and Captivate eBooks

[Mark_Pud]

Hi Rick,

Thanks for your suggestions.. I've been playing around a bit and I've come up with the solution, like most great things the smallest change makes all the difference!

Instead of:

body {

background-image: url("blue_snip.gif");
}

This:

body {

background-image: url("/WebHelp/blue_snip.gif");
}

The little / at the front making it relative to the server root so that it doesn't need a copy of it in every folder, and RH doesn't complain about trying to save it either!!

The only downside is that the image does not show in a local preview, but it works fine once viewed on the live server.