Support » Themes and Templates » Adding Image to Smallbiz Menu Bar

  • Resolved Mrs Chippy


    Anyone know how to add an image to the menu bar in the SmallBiz theme?

    There’s a tutorial out there from but I can’t make it work. I’ve uploaded a 900x30px png image to WordPress and changed the relevant line in the Header PHP, but no joy.

    Any ideas?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Send a link to your site.


    Site is

    Any thoughts most welcome!

    Image in the header: Use a jpg properly sized. Yours is 1.92MB! Here is the same image, properly sized and saved as a jpg at a measly 145KB.

    I’m having trouble wrapping my head around what you are trying to do. Are you:

    1.) Adding an icon image to menu items?
    2.) Adding a background image behind the links?
    3.) Dropping down the menu bar on top of the header image to align in the differentiated space? Someting like this >>

    I like the site 🙂

    Nice work with the image!

    It’s #2 above that I’m trying to do. I want my menu bar to grade from white to pale grey vertically – something like this:

    I’m rubbish with code so thought I’d juat swap the flat white colour for an image. Any other (easier!) options warmly welcome.

    Thanks again.

    Ahhh, easy peasy. What is needed a background image to tile horizontally the width of your menu bar. I recreated their gradient with Photoshop and uploaded it, then used firebug to see what it would look like on your site (view)

    You can download my image or create your own. Here is the code for your css.

    #access .menu-header, {
        background: url("images/smart-green-top-menu-bg.jpg") repeat-x scroll 0 0 transparent;
        font-weight: bold;

    Have a look at it now – perfect!

    Took about 10 seconds to do it and I’d been messing about with it for days.

    Many thanks Mr Flash!

    Hi Flashbuddy – Dont suppose you could help me too?

    I’m also looking to update my Smallbiz site with a header graphic.. I followed your instructions above which allowed me to update ONLY the menu portion of the header graphic.. I want the whole header graphic updated with new image background (ie the bit with “Bray Holiday Apartment” etc).

    See site:


    You have a choice of two methods. Create a div and put your image in it, either as a background image or a normal image contained in the div. Assign a postion and z-index. Put that in your header div.

    <div style=”position: relative; z-index: 10;><img src=””></div>
    <div id=”niftyImage” style=”background:url(pathtoimage.png) no-repeat 0 0 transparent; position: relative; z-index: 10;></div>

    Move it where you want it with css.

    Method two is to grab the header image and edit it in Photoshop or something like it. See my version:!142

    Thanks Flashbuddy – Second option worked for me, dont know why I didn’t think of that myself!


    Geeze, will ya resize that background image to fill the browser space?!

    Google jQuery Background Stretcher.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Adding Image to Smallbiz Menu Bar’ is closed to new replies.