home / documentation / reference / menubackgroundimage

MenuBackgroundImage

Description:

The src, i.e., server location, of a background image that should be applied to this menu.

Value:

String, null, or JavaScript expression that returns a String/null.

Applies To:

Menus.

Browser Compatibility:

MenuBackgroundImage is not supported in Netscape 6.0x. In Netscape 4.x, using a MenuBackgroundImage will render the menu's border meaningless, since the image will cover the border. Some problems have also been noted in Safari background images.

Comments:

The configuration parameter ImageDir has no effect on the setting for MenuBackgroundImage. Rather, HierMenus only looks exactly to the URL location you specify in MenuBackgroundImage for the location of the image graphic itself.

Include only the actual server location (URL) of the graphic in MenuBackgroundImage. You can specify additional parameters, such as repeat-x, etc. in MenuBackgroundProperties.

In scrolling menus, you can select to have the menu's background image scroll with the menu, or remain in a fixed location. Use the ScrollBackgroundImage parameter to make this distinction.

When using background images, you will generally want to set your background colors (MenuBGColor and BGColor) to transparent, to ensure that the item and menu background colors do not overlay the menu's background image. Another tip is to set ScrollBackgroundImage to true, set BGColor to transparent, and then specify a valid MenuBGColor. When set this way, the background image will overlay the MenuBGColor. Those with image support in their browsers will see the image as you intended, while those without will see the MenuBGColor as the default menu item background.

As noted above, some browsers will not support image backgrounds at all, and therefore their menu text displays may not be appropriate. Creating a menu where the readability of the text is dependent on a menu background image is not recommended. You can, however, use the built in HM variable HM_BackgroundSupport in your configuration file to supply alternate color schemes for those menus that depend on background images:

BGColor:(HM_BackgroundSuppport)?"transparent":"black",

Note that HM_BackgroundSupport only indicates whether HM will support the application of background images to menus in the user's browser. It does not indicate whether or not the user allows images to be displayed within their browser.

Examples:

// Ok:
MenuBackgroundImage:"MenuBack.gif",
MenuBackgroundImage:"http://myserver.com/myHMImages/MenuBack.gif",
MenuBackgroundImage:null,
MenuBackgroundImage:(window.showBack)?"MenuBack.gif":null,
    // if the user defined variable "showBack" is true,
    // then use "MenuBack.gif"

// Incorrect:
MenuBackgroundImage:MenuBack.gif,      // Strings must be quoted
MenuBackgroundImage:"null",            // null must NOT be quoted
MenuBackgroundImage:'(window.showBack)?"MenuBack.gif":null', 
    // no quoted expressions

Default:

null

See Also:

MenuBackgroundProperties, ScrollBackgroundImage, ItemBackgroundImage, ItemBackgroundProperties