<!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">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.connection {
cursor:pointer;
display:block;
height:80px;
position:absolute;
width:50px;
}
.ui-widget-content {
color:#FFFFFF;
}
.ui-corner-all {
-moz-border-radius:6px 6px 6px 6px;
}
.ui-widget-content {
background:url("images/ui-bg_inset-soft_25_000000_1x100.png") repeat-x scroll 50% bottom #000000;
border:1px solid #666666;
color:#FFFFFF;
}
.ui-widget {
font-family:Segoe UI,Arial,sans-serif;
font-size:1.1em;
}
.con-text {
font-size:0.7em;
margin-top:-0.7em;
padding:2px;
}
.conimage {
background:url("access-link-card.png") no-repeat scroll 0 0 transparent;
}
.con-icon {
margin:0 auto;
text-align:center;
z-index:100;
background: url("access-link-card.png") no-repeat;
padding-left: 34px;
}
</style>
</head>
</head>
<body>
<div class="connection ui-draggable" id="connection-581" style="left: 435px; top: 123px;">
<div class="con-icon" id="con_icon-581">
<div class="con-text ui-widget ui-widget-content ui-corner-all" id="con-text-581"> Rahul3
</div>
</div>
</div>
</body>
</html>
i want this image in the left corner of div con-text or con-icon as badge, image is coming not full size please help how the image will come in full size
regards rahul
you could try Casablanca's answer, another option is to set the background position of the image:
when positioning background elements, the two pixel values are horizontal eg (5px) then vertical (2px).
Adjust with your browser's developer tool for the desired position.
Set it as a background image and add a padding to the element so that the text appears to the right of the image: