Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

want to add image left corner of div

alt text

    <!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

like image 455
XMen Avatar asked Oct 11 '10 05:10

XMen


1 Answers

Set it as a background image and add a padding to the element so that the text appears to the right of the image:

.con-text {
  font-size:0.7em;
  margin-top:-0.7em;
  padding:2px;
  background: url(your_image_url) no-repeat;
  padding-left: something-greater-than-image-width px;
}
like image 64
casablanca Avatar answered Oct 05 '22 22:10

casablanca