This is a simple tip that many beginners to CSS do not realize and use to their advantage. In this brief tutorial I will go through the method on how to use a background image as the background to an element, and make it repeat either in width (x) or height (y) so that your element can stretch as far wide or high as is needed.

 Navigation
I’m going to start with navigation. Here in the html code you can see I have set up a simple unordered list and placed list items and links inside. I’ve then styled them so that they display inline and I have given them a fixed height.
HTML
<ul id=”nav”>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
</ul>

CSS:
ul {
list-style: none;
padding: 0;
margin: 0;
}

ul li {
float: left;
height: 100px;
margin-left: 20px;
}

You can see the results of the styling so far here.

I’m now going to move on to the background image I’ve made. You can view it here. It is 2px wide and 100px high.
Now I’m going to add the vital code that makes it work. No changes here made to the HTML, just the CSS
CSS
ul {
list-style: none;
padding: 0;
margin: 0;
ul li {
float: left;
height: 100px;
margin-left: 20px;
background-image: url(2×100bgimage.gif);
background-repeat: repeat-x;
}
That’s it! You should now have something similar to this. Now, it’s up to you to style it further. With a bit more styling I ended up with this.
To get the continuous background I just removed all margin styles from the li. Good luck, and look for a future post that expands on this idea.

Back to Home Page

Categorised under: CSS, Images, Navigation, Tips & Tutorials by Jack F