Css Rollover with image : background « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. background

Css Rollover with image

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
  text-align:center;
}
#nav{
  width:600px;
  margin-left:auto;
  margin-right:auto;
}
#nav ul, #nav li {
  margin:0;
  padding:0;
  list-style:none;
}
li{  
  float:left;
  width:100px;
  height:22px;
  line-height:22px;
  background:url(images/roll-up.jpg) no-repeat left top;
}
#nav a{
  display:block;
  width:100px;
  height:22px;
  background:url(images/roll-down.jpg) no-repeat left top;
  text-decoration:none;
  font-size:x-small;
}
#nav a:hover{background:transparent;}
</style>
</head>
<body>
<div id="nav"> 
  <ul>
    <li><a href="#">Testing 1</a></li>

    <li><a href="#">Testing 2</a></li>
    <li><a href="#">Testing 3</a></li>
    <li><a href="#">Testing 4</a></li>
    <li><a href="#">Testing 5</a></li>
    <li><a href="#">Testing 6</a></li>
  </ul>

</div>
</body>
</html>








Related examples in the same category

1.'background' Example
2.The background shorthand property provides for specifying all five separate background properties in one single property.
3.background: mistyrose
4.background: gray
5.background: rgb(128, 128, 128)
6.The background-color value can be transparent keyword, which is also the default value.
7.The background-color value can be a hexadecimal value
8.The background-color value can be a short hexadecimal value
9.background: yellow;
10.background: white url('http://java2s.com/style/logo.png') center center; (image and position)
11.background: url('http://java2s.com/style/logo.png') repeat-x; (background-image-repeat)
12.background: url('http://java2s.com/style/logo.png') repeat-y scroll; (background image repeat attachment)
13.background: mistyrose;
14.background: pink;
15.background: lightyellow;
16.background: rgb(234, 234, 234);
17.background: yellowgreen;
18.background: no-repeat fixed bottom center;
19.background x tiled
20.background y tiled
21.Background fixed
22.Whole page background
23.Whole page shading effect
24.HTML and CSS for background colors
25.Using more than one background image
26.Merge several image to one big background image
27.CSS Background Attributes Example
28.Link with background
29.hr border: none; background-color: #256579; color: #256579; height: 2px; width: 80%;
30.tfoot td background: #808080;color: white;
31.background attachment: fixed
32.option background-color: #3CB371;color: #ffffff;
33.code padding:3px; background-color:black; color:#FFFFFF;
34.background-attachment: fixed;
35.demonstrating the background-color property
36.Background grid
37.a:hover {color:#FF9900; text-decoration:underline; background-color:#f9f0f0;}
38.thead, tfoot {border:solid; background-color:#efefef; font-size:36px;}
39.Update background image when mouse hover
40.Using background image for DIV
41.background: url(img/document.gif) no-repeat left center;
42.Change background when mouse hover
43.a:hover background: inherit;
44.Using shade image to as the title bar background
45.Round corner with background image
46.Shading background
47.Blue background
48.Black background
49.background: #ffffff url(1024px-images/background.gif) top center repeat-y;
50.Round corner with background image 2
51.Block quote with background
52.background: rgb(244, 244, 244);
53.The background shorthand property
54.background assigns the padding area inside the box to a background color and/or image.
55.Set URL for Background Image
56.Background with no repeat
57.Add background image to LI
58.background: lightblue
59.background: lightgreen
60.background: pink