CODEWITHSUNDEEP
cssimagebackgroundnavigationbar
Christian
Christian

Reputation: 31

How to to set a background image on a navigation bar?

I'm trying to make a navigation bar with a background image, including ul and li as links, but could not succeed.

I don't have a path error, as I have other img elements that render properly. The html part is just ul and li elements inside the nav area.

css:

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

I have searched the web for solutions, but I haven't found any that works. I have tried position, size and repeat.

Edit: I have made the ul and li menu inline, so they fit the 40px height.

Upvotes: 3

Views: 16172

Answers (2)

danwellman
danwellman

Reputation: 9273

You're missing the closing bracket at the end of the image path, should be:

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

You also probably want to set the background-repeat and background-position properties in the background style...

EDIT Are your list items floated? If they are, they need to be cleared or the container will collapse and that would cause the background image not to be displayed

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34863

You need to remove the height from the rule which defines the background img.

So something like

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

Right now you have it lumped in with the file path, which is not closed because it is missing a bracket.

Upvotes: 1

Related Questions