title: Firefox XUL Toolbar background image
body: <p>I have my own toolbar with toolbox and toolbarpalette.<br>
  I have followed this <a href="https://developer.mozilla.org/en/Skinning_XUL_Files_by_Hand" rel="nofollow">https://developer.mozilla.org/en/Skinning_XUL_Files_by_Hand</a><br>
  and background image for toolbar is not displaying, what can be wrong?<br>
  Cannot found any debug message in Error console</p>
  
  <p>Note that <strong>Image #logoimage is displaying correctly</strong></p>
  
  <p><strong>XUL</strong>  </p>
  
  <pre><code>&lt;toolbox id="navigator-toolbox" class="nav-box" crop="end"&gt;
          &lt;toolbarpalette id="BrowserToolbarPalette"&gt;
              &lt;image id="logoimage"/&gt;
              &lt;toolbarbutton type="menu" label="&amp;toolbar.quicklinks.label;" id="quicklinks"&gt;
                  &lt;menupopup&gt;
                      &lt;menuitem class="menuitem-iconic" label="&amp;toolbar.quicklinks.quicklink1;" image="chrome://tbar/skin/icon.png"/&gt;
                  &lt;/menupopup&gt;
              &lt;/toolbarbutton&gt;
          &lt;/toolbarpalette&gt;
          &lt;toolbar id="test-toolbar"
               class="nav-bar"
               mode="full"
               iconsize="small"
               customizable="true"
               context="toolbar-context-menu"
               toolbarname="Toolbar"
               crop="end"
               defaultset="logoimage,toolbarseparator,quicklinks"&gt;
          &lt;/toolbar&gt;
      &lt;/toolbox&gt;
  </code></pre>
  
  <p><strong>CSS</strong>  </p>
  
  <pre><code>toolbar.nav-bar {
      background-image: url("chrome://tbar/skin/tbg.png");
  }
  
  #logoimage {
      list-style-image: url("chrome://tbar/skin/logo.png");
  }
  </code></pre>