Accessibility

CSS Advisor

Background image for nav menu

by cokesshouts on March 4, 2012 Avg Rating 2.0 (1)   |   Log in to rate post.

Tagged with Explorer 8.0 , Firefox 3.5 , Background

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>

 

 




Tagged with Explorer 8.0 , Firefox 3.5 , Background

Tag it on del.icio.us or Digg

Text ID: BACKGROUND_IMAGE_FOR_NAV_MENU



Comments (2)

To add a comment, please Log in.




CSS

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

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





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)