두 가지 크기를 보여주는 이미지

Question

하나의 이미지를 배경 이미지로 만들려고합니다. 문제는 이미지가 두 번 표시된다는 것입니다. 원래 크기에서 한 번, 다시 페이지의 전체 너비를 채우는 더 큰 크기로 다시 표시됩니다. 나는 왜 그들이 둘 다 나타나는지 모르겠습니다. 이미지를 반복하지 않도록 설정했습니다. 값을 변경하면 (예 : 높이가 335px에서 900px로) 큰 크기로 표시되는 이미지의 크기가 조정되지만 원래 크기 이미지는 방금 언급 한 이미지 상단에 계속 표시되어 enter code here 크기가 조정됩니다. 원본 크기 이미지가 나타나지 않게하려면 어떻게해야합니까? 이것은 내 CSS입니다 :

#banner-contact{ 
    width: 100%; 
    height:100px; 
    background-image:url('resized-images-logo/contact-page-resized.jpg'); 
    background-repeat:no-repeat; 
    background-size:cover; 
    margin:0px; 
} 

with the following html: 

    <div id="banner-contact"> 
     <img src="resized-images-logo/contact-page-resized.jpg"> 
    </div> 

Answer 1

img html 요소와 background-image CSS 스타일은 모두 표시된 이미지를 생성합니다. html에서 img 요소를 제거 할 수 있어야하고 div의 CSS 스타일이 표지 이미지를 표시합니다.