Background Image in the Navigation Pane

[CRO1]

Greetings,

When I add a background image to the Navigation Pane the appears as "Tile". How can I display the image as "Strench" or "Centered" so that the image appears once as opposed to multiple times.

Thanks

[Guest]

How big is the image? One way to get the effect you want is to make the actual image file dimensions big enough that it's likely no one will every scroll to the edges of it. For example, making it 500px wide and 2000px high. Of course, they're making some huge monitors these days, so maybe 3000 or 4000px high is better. As long as all that extra space is a solid color, it won't add much to the overall size of the image file. The image that you want to show up would be near the upper-left corner of this 500x4000 file.

Not sure if I explained that very well...

--Ben

[CRO1]

--Ben,

My proposed image is too small. Adjusting the pixels to your suggested measurements distorts the image significantly. I'll look for a larger image, closer to the required pixels.

Thanks for your help

[Guest]

This kind of technique helps with HTML backgrounds, or at least it was a workaround before CSS repeat options became available, so I was thinking it would work in WebHelp (which I'm making an assumption is your output).

Just to check on whether we understood each other, say you have a picture of a dog as the background, and that's what's tiling. My suggestion was to keep the dog the same size, but add the extra pixels to the right and below the dog in your image file so the image file dimensions are larger.

Maybe if you look in your skin file (.skn and find where the background image is referenced, you could add a background-repeat:no-repeat attribute where the other attributes are listed.

[CRO1]

--Ben,

I tried the bakground image attributes (repeat: no repeat), unfortunately the image still repeats. Could you look at the snippet of code and advise if it is correct.

In the .skn file:

<subpane name="Contents">
<image>background:soccerfield.jpg?background-repeat:no-repeat </image>
<color>background:White alink:Silver hover-color:Navy</color>
<font>font-family:"Microsoft Sans Serif" font-size:8pt font-weight:Normal font-style:Normal text-decoration:none font-sizeadjust:none font-stretch:normal font-variant:normal font-color:Black</font>
</subpane>

[Guest · Accepted solution]

I can't get that method to work myself. It may be possible, but we'd have to guess at the syntax and tweak it until it worked.

However, I tried the original solution, and it works. I created a 120x120px smiley face and put it near the upper-left corner of a 1000x4000 white image, exported it as a GIF, and used it as the background. It repeats, but I have to make the nav pane extremely wide to see it repeat horizontally. (To eliminate this problem, you could make the image 3000 or 4000px wide.) The image is only 5KB in size.

Give that a try and see if it gives the effect you want.