Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

How to use a background image in a horizontal menu

menu, css, backgorund image

5:44 pm on Jul 22, 2009 (gmt 0)

New User

5+ Year Member

joined:July 22, 2009
posts: 39
votes: 0

I have coded (from a sample) a CSS based (no javascript) horizontal menu in a web page; menu buttons are left floated each other so they lay horizontally on the same "line".

The problem is that the menu items are built dynamically: as a result, menu width changes.

I wish I could keep the menu width constant and I thought I could solve the problem placing a "menubar" background image (same as the buttons\menu-item background) at the maximum allowed width, in a way it lays below the menu buttons.... but I don't know how to do that!

I have tried to create fixed width DIV whose background is a picture acting as the menubar, and inside this DIB block, place the code for the CSS menu, but it wouldn't work.

Any hint?

CSS Code:

@charset "utf-8";




#idwrapper {




#container {



#hmenu {

 text-decoration: none;


#hbuttons a{

 display: block;

 text-decoration: none;

 font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;



 color: white;


 height: auto;

 float: left;

 display: inline;

 margin-right: 1px;

 background:url(img/tabsquare.jpg) no-repeat ;

 padding: 5px 2.5% 8px 2.5%;



#hbuttons a:hover{




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



 <link rel="stylesheet" type="text/css" href="style.css"/>



<div id="idwrapper">

 <!-- mený START -->

 <div class="fixed"></div> <!-- clears floats -->

 <div id="hmenu">

 <div id="hbuttons">

 <a href="/item1">Menu Item 1</a>

<a href="/item2">Menu Item 2</a>

<a href="/item3">Menu Item 3</a>



 <div class="fixed"></div> <!-- clears floats -->

 <!-- mený END --> 




Rendering is done in FF 3.5, IE7 and Opera 9.64