div 안에 그림 맞추기

Question

div 안에 이미지가 있습니다. div에 배경 그림이 있습니다. 그리고 이미지가 중앙에 오도록 놓으려고하고 각면마다 3 픽셀의 여백이 있습니다.

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

내 HTML :

이

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

사진이 실 거예요 상관없이, 내가주고 얼마나 많은 마진 .. 움직이지 ..

Answer 1

당신은 image를 사용하는 태그는 유효한 HTML 태그가 아닙니다. 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

마찬가지로, 당신은 이미지에서 여백을 제거 할 수 있습니다 및 사업부에 패딩을 적용

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