Navigation Bars Part 3 – Advanced Backgrounds

Following on from my other two tutorials, this time I’ll show you a simple technique to display background images in your tabs with a simple hover over/out effect without Javascript.

Example 1

The HTML and CSS for this tutorial will be taken from the list-styled horizontal nav bar in the first tutorial, so I’ll just show the extra required CSS here.

1
2
3
4
5
6
#nav a{
	background-image:url(tab_out.gif);
}
#nav a:hover{
	background-image:url(tab_over.gif);
}

So, this was all I added to the relevant styles in the original document to make it work. Two images tab_out.gif and tab_over.gif have to be created and thrown into the same folder as the html file for it to work. You can steal mine if you like, or create another pair of similar 144×19 GIF images.

tab_out.gif
tab_out.gif
tab_over.gif
tab_over.gif

Example 2

This isn’t a perfect solution, though, because the hover state image could take a few seconds to load on slow connections, or even on fast ones depending on what you get the file size down to. So what we want to do is load it as soon as the page does, so when the user hovers the mouse over our tabs they see the hovered image straight away.

1
2
3
4
5
6
#nav a{
	background-image:url(tab.gif);
}
#nav a:hover{
	background-position:0 100%;
}

So this time I’ve combined tab_out.gif and tab_over.gif into one image, one on top of the other. Now when we hover over it, the background-position attribute ‘moves’ the image that’s already been loaded on your page halfway down, instead of loading up another one onto the page. The 0 100% part means it moves it 100% vertically and shows the orange half. An exact movement of 0 -19px would work equally as well.

tab.gif
tab.gif

Example 3

But I’m still not happy. I want it to load even faster than that, and I’m sure given the option you do too. So how do we do that? Well we shrink the image.

This time I have taken the 144×38 GIF from the last example and shrunk it horizontally to just 1px wide. Now, by default CSS should show it okay as soon as you change the size of it, but I’ve written the CSS differently below to make it look a lot simpler, and could be good practice for you to use this yourself. You can cram the background colour and image URL, repetition and position into one background attribute to make things much easier, like so:

1
2
3
4
5
6
#nav a{
	background:#eee url(tab.gif) repeat-x 0 0;
}
#nav a:hover{
	background-position:0 100%;
}

So there you go, three different ways of displaying hover-over backgrounds for your navigation bar. I know which one I prefer, but like most code examples it always depends on your own project and the use it’s intended for.

All resources can be downloaded from the examples folder, with this particular topic’s resources filed under advanced-bgs.


2 thoughts on “Navigation Bars Part 3 – Advanced Backgrounds

  1. I get trying to make the filesize as small as possible, but a 1px image has to be blitted 144 times(according to your example) by the renderer.

    This can cause slowness – not in loading the image, but in actual rendering and browser responsiveness – especially when scrolling a page. It’s much better to increase the image width to 10~20px.

    1. Ah interesting. I hadn’t thought about that but it does make sense.

      Suppose it’s down to how much bandwidth those few extra KBs will actually affect your servers, which for smaller sites isn’t much and you would be better off helping with user experience.

      Thanks Eric.

Comments are closed.