Aligning a picture inside a div

Question

I have an image inside a div.. the div has a background picture..and I am trying to move the image so that it is centered and have 3px margin from each side.

My css:

       #user_avatar_background
       {
           float:left;
           margin:5px 15px 5px 0px;
           margin-right: 10px;
           width:200px;
           height:200px;
           background-image: url('image_files/avatar-background.gif');
           background-repeat: no-repeat;
           overflow: hidden;
       }
       #user_avatar_background image{
           position:relative;
           margin:3px 3px 3px 3px;
       }

My html:

    <div id="user_avatar_background">
        <image src="Images/user_pics/cypher.jpg" width="150px" height="150px" />
    </div>

The picture wont move.. no matter how much margin, I give it..

Answer 1

You are using an image tag which is not a valid html tag. Try using img .

CSS:

#user_avatar_background
   {
       float:left;
       margin:5px 15px 5px 0px;
       margin-right: 10px;
       width:200px;
       height:200px;
       background-image: url('image_files/avatar-background.gif');
       background-repeat: no-repeat;
       overflow: hidden;
   }
   #user_avatar_background img{
       position:relative;
       margin:3px 3px 3px 3px;
   }

HTML:

<div id="user_avatar_background">
    <img src="Images/user_pics/cypher.jpg" width="150px" height="150px" />
</div>

Answer 2

Similarly, you can remove the margin from the image and apply the padding to the div:

#user_avatar_background
   {
       float:left;
       margin:5px 15px 5px 0px;
       margin-right: 10px;
       width:200px;
       height:200px;
       background-image: url('image_files/avatar-background.gif');
       background-repeat: no-repeat;
       overflow: hidden;
       padding: 3px;
   }
   #user_avatar_background image{
       position:relative;
   }