Creating a graph using percentage background images

Date: 27 June 2005
Author: Russ Weakley

Sample bar graph

HTML markup

<ul class="graph">
	<li class="percent20">20%</li>
	<li class="percent40">40%</li>
	<li class="percent60">60%</li>
	<li class="percent80">80%</li>
	<li class="percent100">100%</li>

CSS code

	margin: 0;
	padding: 0;
	list-style-type: none;
ul.graph li
	margin-bottom: .5em;
	padding: .2em;
	background: #600;
	color: #fff;
ul.graph li.percent20
	background: url(graph20.jpg) repeat-y 20% 0;
ul.graph li.percent40
	background: url(graph40.jpg) repeat-y 40% 0;
ul.graph li.percent60
	background: url(graph60.jpg) repeat-y 60% 0;
ul.graph li.percent80
	background: url(graph80.jpg) repeat-y 80% 0;


The images used in this demo are freely available as a zip file.

Comments so far

  1. Chris says:

    so where are the graph##.jpg images??? is there a set size for them if i want to create my own?


  2. Russ says:

    @Chris: Good point. A link to a zip file with the images used has been added to the article.

  3. Tom says:

    Thanks for the code!