asked on

Background image inside a tag

Hello experts.
I need help to position a background image (in this case a ui framework icon ) on the left of a text .
The result must look like the image.

Any help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.ui-icon-custom-link {background-image:url(js/ui/development-bundle/themes/ui-lightness/images/ui-icons_ef8c08_256x240.png);background-repeat:no-repeat; overflow:hidden; text-indent:-99999px; display:inline;width: 16px; height: 16px;position: absolute;margin: 0 10px 0 0;}
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.linksblack a,linksblack a:visited{text-decoration:underline;color:#171717;font-size:12px;}
.linksblack a:hover{text-decoration:underline;color:#c77405;}
</style>
</head>

<body>
<div class="linksblack">
  <a href="#"><span class="ui-icon-custom-link ui-icon-triangle-1-e"></span>testlink</a>
</div>
</body>
</html>

Open in new window

test.gif

c1nmo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

.ui-icon-triangle-1-e { background-image:url(tri.png);
background-repeat:no-repeat;
url(tri.png);
padding-left:10px; }

.linksblack a,linksblack a:visited{text-decoration:underline;color:#171717;font-size:12px;}
.linksblack a:hover{text-decoration:underline;color:#c77405;}

}

</style>
</head>

<body>

<div class="linksblack ui-icon-triangle-1-e">

<a href="#">testlink</a>
</div>
</body>
</html>

Panos

ASKER

Hi c1nmo.
It is not what i'mlooking for.
I need something with a main background image :.ui-icon-custom-link class

and using the position attribute show a part of te main image (like the ui framework works)

c1nmo

More like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.ui-icon-custom-link {background-image:url(js/ui/development-bundle/themes/ui-lightness/images/ui-icons_ef8c08_256x240.png);background-repeat:no-repeat; overflow:hidden; text-indent:-99999px; display:inline;width: 16px; height: 16px;position: absolute;margin: 0 10px 0 0;}
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.linksblack a,linksblack a:visited{text-decoration:underline;color:#171717;font-size:12px;}
.linksblack a:hover{text-decoration:underline;color:#c77405;}
</style>
</head>

<body>
<div class="linksblack">
<a href="#"><span class="ui-icon-custom-link ui-icon-triangle-1-e"></span><span style="margin-left:15px">testlink</span></a>
</div>
</body>
</html>

Panos

ASKER

The problem with this solution (i have tried it myself) isthat the arrow is underlined too.
I think that the arrow must be set in the div class with a padding or margin ,and not in the "a" tag to solve this.

What to you think?

c1nmo

The arrow isn't underlined in my test, which browser are you using?

Panos

ASKER

FF6

Panos

ASKER

It is underlined in FF and SAFARI

there are noproblems in : IE,Chrome,iron,opera

ASKER CERTIFIED SOLUTION

c1nmo

membership

This solution is only available to members.