Display image background on active page menu item

Nice image, but without some contrxt there is not much we can do. Some code or link might get you some help.

body.home #navi-main-list li.home {background:url(images/bg-images/active-menu-background.png) bottom center no-repeat;}
body.page-id-979  li.buyers {background:url(images/bg-images/active-menu-background.png) bottom center no-repeat;}
body.page-id-981  li.sellers {background:url(images/bg-images/active-menu-background.png) bottom center no-repeat;}


#navi-main {float:left; margin-top:15px; margin-left:30px;font-family:"Times New Roman", Times, serif;}
#navi-main-list li {display: inline; list-style-type: none; padding-right: 20px;}
#navi-main a {text-decoration:none; font-family:"Times New Roman", Times, serif;}

Select allOpen in new window

<div id="navi-top">
        	<ul id="navi-top-list">
       			<li><a href="/RealEstate/about-us/">About Us</a>| </li>
            	<li><a href="/RealEstate/contact-us/">Contact Us</a>| </li>   
       			<li><a href="#" target="_blank">Facebook</a>| </li>  
       			<li><a href="#" target="_blank">LinkedIn</a> </li>
           	</ul>
        </div>

Select allOpen in new window

Here are some of the CSS and HTML i have already.  I already posted a link to my website

Sorry,  this html
 

<div id="navi-main">
        	<ul id="navi-main-list">
				<li class="home"><a href="/RealEstate/" id="navi-home">HOME</a></li>
				<li class="buyers"><a href="/RealEstate/buyers" id="navi-buyers">BUYERS</a></li>
				<li class="sellers"><a href="/RealEstate/sellers" id="navi-sellers">SELLERS</a></li>
				<li><a href="/contact-us" id="navi-phone">(847) 609-9000</a></li>
			</ul>
        </div>

Select allOpen in new window

Sorry, I didn't see the link it was down among the EE clutter.

The image is not showing fully because the li is not big enough.  It will only size to the content, not the background.  You could try adding height and width properties to the home class, and see if that will stretch it out for you.  If that does not work we might have to try more drastic measures like wrapping a container around the li.

putting a height on the li class did not work for me.

Well there is good news and better news.

The good news is I know what is causing the problem.  This line in the styles turns the li into an inline element so that you can put them side by side, but inline elements do not expand to full height unless they have enough content to force it:

#navi-main-list li {display: inline; list-style-type: none; padding-right: 20px;}

The better news is thar we can fix it by making it an inline-block:

#navi-main-list li {display: inline-block; list-style-type: none; padding-right: 20px;}

Should do the trick.

great,  that is showing the full background image now.    I would like the links "Home" "Buyers" "Sellers" to appear as if they are inside the image (Like the image shown above).  How would i modify my css to get the desired effect.

updated website

brilliant, thank you.  Working fine now locally,  so will add it all to the live site soon.   Thank you very much for the help with this

Glad I could help. It was a good exercise.