Adding Image to Smallbiz Menu Bar

Send a link to your site.

Hi,

Site is https://www.smartgreen.org.uk

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.
https://www.box.com/s/bd91dfa6c05ac2049ed4

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: https://www.toshiba.eu

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, div.menu {
    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: https://www.brayapartment.com

Thanks!
Gareth

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>
or
<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: https://skydrive.live.com/redir?resid=6F4BBC1BF99B2843!142

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

Cheers
gareth

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

Google jQuery Background Stretcher.