want to add image left corner of div

css image html background

31,007

Solution 1

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;
}

Solution 2

you could try Casablanca's answer, another option is to set the background position of the image:

.con-text {
    background url('yourImage.jpg') no-repeat 5px 2px;
}

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.

31,007

Author by

XMen

Updated on October 11, 2020

Comments

XMen over 3 years

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

XMen over 13 years

hi i have changed code and edit in question now problem is that image is coming not full size please help how the image will come in full size
casablanca over 13 years

Set width and height for the div to be greater than image size.