Anchor background-image: url(images/meta1.gif) : a background « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. a background

Anchor background-image: url(images/meta1.gif)

     
<!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" dir="ltr" lang="en-US"
  xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style rel="stylesheet" type="text/css">


#meta {
  display: block;
  float: right;
  padding: 41px 0 0 0;
}

#meta li {
  display: block;
  float: left;
  padding: 0 20px 0 0;
}

#meta a {
  display: block;
  float: left;
  font-family: Arial;
  font-size: 11px;
  color: red;
  text-decoration: none;
  padding: 0 0 0 15px;
  background-position: 0px 2px;
  background-repeat: no-repeat;
}

.meta1 {
  background-image: url(images/meta1.gif)
}

.meta2 {
  background-image: url(images/meta2.gif)
}

.meta3 {
  background-image: url(images/meta3.gif)
}


</style>
</head>
<body>
  <div id="header">
    <ul id="meta">
      <li><a href="index.html" class="meta1">Home</a></li>
      <li><a href="#" class="meta2">Bookmark</a></li>
      <li><a href="#" class="meta3">Contacts</a></li>
    </ul>
    <div id="search">
      <input type="text" class="search-field" />
      <input type="button" value="Search" class="search-button" />
    </div>
  </div>
</body>

</html>








Related examples in the same category

1.Anchor background-position: 0px 2px;
2.Anchor background-image: url(image-demo-2011/bullet.gif);
3.Anchor background-position: top left;
4.anchor background: inherit;
5.Anchor background:inherit;