Clever Geek Handbook

How do I set a background image on the navigation bar?

I am trying to create a navbar with a background image including ul

and li

as links but failed.

I have no path error as I have other items img

displaying correctly. Part of the html - this is just ul

, and li

elements within the navigation area.

CSS

#main_menu {background-image:url(resources/images/navbar.png);height:40px;}

I searched the internet for solutions but I didn't find anything like that. I've tried position, size and repeat.

Edit: I made the menus ul

and li

inline, so they match the 40px height.

+3


source to share


2 answers


You are missing the closing parenthesis at the end of the image path, it should be:

#main_menu {background-image:url(resources/images/navbar.png);height:40px;}


You might also want to set background and background properties in a background style ...

EDIT Are your list items listed? If they are present, they must be emptied or the container will collapse and this will result in the background image not being displayed.

+1


source


You need to remove the height

img background from the rule.

So something like



#main_menu {background-image:url(resources/images/navbar.png); height:40px;}

Right now you have connected to a file path that is not closed because a parenthesis is missing.

+1


source






More articles:


All Articles