The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Single Image Navigation Bar

  • # April 15, 2009 at 12:24 pm

    Hi, I was wondering how I would go about creating a navigational bar like the one on this site –

    The single image used is at – … prites.jpg

    I understand this effect is achieved by using the ‘background-position’ element in CSS, but after having played around for an hour, I have found myself unable to recreate the effect. How would I go about doing such a thing?

    Thanks in advanced


    # April 15, 2009 at 12:32 pm

    Check this out … s-sprites/

    # April 15, 2009 at 12:56 pm

    Thank you very much, but I am struggling to understand why my code isn’t working on this page –

    The CSS:

    #nav-bar li {

    #left {
    background-position:0 0px;

    #right {
    background-position:-300 -300px;

    The HTML:


    Any ideas?

    # April 15, 2009 at 1:27 pm

    Here you go:

    #nav-bar {
    list-style: none;

    #nav-bar li {
    display: inline-block;

    #nav-bar li a {
    background: url(tabs.png) no-repeat left center;
    height: 57px;
    width: 300px;
    text-indent: -9999px;

    #nav-bar li a:hover {
    background-position: right center;

    # April 15, 2009 at 1:59 pm

    Thanks very much guys for the lightning fast replies, I have solved the issue.

    Soh Tanaka – thank you for the link, I found the tutorial informative and very useful.
    apostrophe – thank you for the code, this is what fixed it for me.

    Thanks again – and have a nice day :)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed