CODEWITHSUNDEEP
htmlcss
BukToof
BukToof

Reputation: 21

How can I position CSS background-images within <li> links?

I'm creating a navigation for a website using left floating unordered lists and am looking for a way to position an image underneath the currently active page link. I assume this can somehow be done with the CSS background-image property.

Thanks for any help!

Upvotes: 2

Views: 927

Answers (1)

Nathan Arthur
Nathan Arthur

Reputation: 9096

Probably the best way to do this is to set a class equal to active on the active link. This could be hard-coded in, or dynamically added using server-side code.

The HTML:

<ul id="nav">
   <li>Link</li>
   <li class="active">Link</li>
   <li>Link</li>
   <li>Link</li>
</ul>

The CSS:

#nav .active {
   background-image:url('YourImage.png');
   background-position:50% 50%; /*Adjust as needed. Also accepts pixel values.*/
}

Background-position added on Godwin's suggestion. See this link for details on its use.

Upvotes: 5

Related Questions