Navigation Bar Background tab

Select which item type to apply the settings.

Set the state of the item type. It can be normal, hover (mouse over) and active (current page is the page that the item linked to).

Select the location. It can be "First image" or "Second image". The "Second image" is on top of the "First image". Two image locations are required to support items with dynamic width.

Click to use image for background.

Click to set that no image is used. This is mainly used for overriding the general settings applied to all items.

Select this to use external image file. When the navigation bar is inserted into the active page, the external image file will be imported to the website automatically.

Select this to use the image file within this website.

Convert the background image to Base64 and embed it in the style sheet. For example, like converting

 

from:

background-image: url("images/background.png");

 

to:

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAATNm/RAAAAH0lE5MgAAAABJRU5ErkJggg==");

 

The image will be compressed first before conversion to make it smaller. Embed small images only and avoid embedding large images as this will increase the size of the style sheet. A Base64 encoded image is about 30% larger than the original one. Your page may be able to load faster as there is no extra http request to get the image.

Select whether the background image needs to be repeated and in what direction.

Set the position of the background image.

Set the background color.