Add background image to anchor link

 


<!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" xml:lang="en" lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Anchors</title>
  <style type="text/css" media="screen">
  
  body {
    font-family: verdana, sans-serif;
    font-size: 12px;
    }
  
  div {
    margin-bottom: 50px;
    }  
  
  #divID a:link {
    padding-right: 15px;
    background: url(img/7.gif) no-repeat center right;
    }
  
  
  </style>
</head>
<body>


<div id="divID">
<p><a href="#oranges">About Oranges</a></p>



</body>
</html>

Related examples in the same category

1.	Introduction to hyperlinks
2.	'link' defines relationship between the current page and external documents
3.	A basic link to another page
4.	A basic link to an external web site
5.	A link with a title attribute
6.	A link with white space
7.	a name = ".."> creates an internal hyperlink
8.	Anchor element
9.	relative link
10.	background image, repeat and position for anchor link
11.	avoid underlining links
12.	Set border for an anchor with under in a
13.	Set text-decoration to none for
14.	Anchor hover image style
15.	Set cursor for anchor link and visted
16.	Set text decoration for anchor
17.	Set background for anchor
18.	Four level nesting for anchor style setting
19.	Using Links - Changing Backgrounds
20.	Using Links with Background Images
21.	Image links
22.	anchor style for removing the underline
23.	Add text decoration for link
24.	List with anchor
25.	Using images as link anchors
26.	text-decoration, color, background-color for hover anchor

Add background image to anchor link : Anchor « Tags « HTML / CSS

Related examples in the same category