Class 4 – Background Images & Positions

Posted: March 7th, 2009 | Author: | Filed under: css, xhtml | Tags: | No Comments »

This example shows you how to use a background image as an icon, similar to some of the icons that were displayed in the MTV Music Video Facebook App design comp.

Click here to view this code in your browser.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Aligning Background Image</title>
	<style type="text/css">
div#menu_item1 {
	width: 150px;
	height: 20px;
	line-height: 20px;
	background-image: url(images/button_playlist.gif);
	background-repeat: no-repeat;
	float: left;
}
div#menu_item2 {
	width: 150px;
	height: 20px;
	line-height: 20px;
	background-image: url(images/button_favorite.gif);
	background-repeat: no-repeat;
	float: left;
}
div#menu_item1:hover, div#menu_item2:hover {
	background-position: 0px -46px;
}
a.menu_link {
	display: block;
	width: 23px;
	height: 20px;
	float: left;
	margin-right: 5px;
	outline: 0px;
}
	</style>
  </head>
  <body>
	<div id="menu_item1">
		<a href="#" class="menu_link"></a>
		<span>Add to Playlist</span>
	</div>
	<div id="menu_item2">
		<a href="#" class="menu_link"></a>
		<span>Add to Favorites</span>
	</div>
  </body>

</html>

No related posts.

Leave a Reply