• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 256
  • Last Modified:

Display image background on active page menu item

I want an image background to appear behind the current page menu item.

I have the image appearing slightly,  but want it to be displayed like the image file  hereappear like this.
this is my website
0
Jon Imms
Asked:
Jon Imms
  • 5
  • 5
1 Solution
 
COBOLdinosaurCommented:
Nice image, but without some contrxt there is not much we can do. Some code or link might get you some help.
0
 
Jon ImmsWeb DeveloperAuthor Commented:
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;}

Open 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>

Open in new window


Here are some of the CSS and HTML i have already.  I already posted a link to my website
0
 
Jon ImmsWeb DeveloperAuthor Commented:
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>

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
COBOLdinosaurCommented:
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.
0
 
Jon ImmsWeb DeveloperAuthor Commented:
putting a height on the li class did not work for me.
0
 
COBOLdinosaurCommented:
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.
0
 
Jon ImmsWeb DeveloperAuthor Commented:
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
0
 
COBOLdinosaurCommented:
It took some experimentation but I think I've got the right combination for you.  It may take some fine tuning to get the exact values, but this is what you need .

The right left alignment goes here:
#navi-main-list li {display: inline-block; list-style-type: none; padding-right: 20px;text-align-center;}

Open in new window


That will put the link text in the center of the li, but if it is not exact you might have to adjust the padding of the li; that will be trial and error, but hopefully you won't need to adjust.

Now the vertical placement is not quite so intuitive.  We have to set a line height on the link:

#navi-main-list li a {line-height:80px}

Open in new window


I use 80px as an arbitrary value.  Set it 4 or 5 pixels less than the height of the image, and then adjust a few pixels at a time until it is where you want it.
0
 
Jon ImmsWeb DeveloperAuthor Commented:
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
0
 
COBOLdinosaurCommented:
Glad I could help. It was a good exercise.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now