A–C
D–H
I–Z
Developer services
Project centers
Community resources
- Adobe Cookbooks (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User groups
- Adobe Community Professional
- Developer events
Integration
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
Archives
ADC program
Additional resources
CSS Advisor
Background image for nav menu
Problem
I've created a horizontal navigation menu, but the background image won't appear.
Solution
Not sure -looks right to me
Detailed description
CSS
div#main_menu
{
float: left;
clear: both;
width: 100%;
height: 73px;
background: url(images/button-banner.png) no-repeat;
}
div#main_menu ul
{
float: left;
list-style: none;
margin: 0;
padding: 0;
}
div#main_menu ul li
{
float: left;
height: 73px;
margin: 0 15px;
}
div#main_menu ul li a
{
color: #7A5A46;
float: left;
margin-top: 17px;
text-decoration: none;
text-align: center;
}
HTML
<div id="main_menu">
<ul>
<li><a class="" href="#">Menu<br/></a></li>
<li><a class="" href="/ordering/">Ordering Info<br/></a></li>
<li><a class="" href="/photos/">Photos<br/></a></li>
<li><a class="" href="/blog/">Blog<br/></a></li>
<li><a class="" href="/about/">About Me<br/></a></li>
<li><a class="" href="/contact/">Contact Info<br/></a></li>
</ul>
</div>
Text ID: BACKGROUND_IMAGE_FOR_NAV_MENU
Comments (2)
To add a comment, please Log in.
CSS
by stefsterhb007 on April 2, 2012
Several things could be wrong. One your image wasn't formatted correctly, the path to the folder is broken and 3rd depending on your browser some browsers want you to use background-image. With all that said I'd make sure 1. your image is not a psd and is definitely saved as a png. second for path sometimes adding ../ will help and if all else fails try background-image:
No Issue
by jhachem on March 17, 2012
Hello,
I have tested your code, everything seems fine.
But from what it looks to me is that you want the background image to cover your whole div#main_menu.
If this is the case, try to add the background-position property so you can control where the background is positioning.
Like if you want it to be centered do it like this:
div#main_menu
{
float: left;
clear: both;
width: 100%;
height: 73px;
background: url(images/button-banner.png) no-repeat;
background-position:50% 50%;
}
Cheers,
JadHac