5 Replies Latest reply on Sep 22, 2008 7:28 AM by Ben Minson

    Background Image in the Navigation Pane

    CRO1 Level 1
      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
        • 1. Re: Background Image in the Navigation Pane
          Ben Minson Level 2
          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
          • 2. Re: Background Image in the Navigation Pane
            CRO1 Level 1
            --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
            • 3. Re: Background Image in the Navigation Pane
              Ben Minson Level 2
              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.
              • 4. Re: Background Image in the Navigation Pane
                CRO1 Level 1
                --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>

                • 5. Background Image in the Navigation Pane
                  Ben Minson Level 2
                  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.