이미지(image)와 달리, 배경 이미지(background-image)는 콘텐츠가 아닌 장식이다.
따라서 위치를 정확히 조절하기도 어렵고 alt 텍스트도 없다.
이미지가 너무 작으면 바둑판 모양으로 계속 반복되고, 크더라도 해당 요소를 다 채우기엔 크기가 모자라면 배경이미지 맨 윗 부분이 반복된다.
background-size: cover;-> 보통 이 속성을 사용한다(요소 크기만큼 꽉 차게 만드는 속성). 그렇지만 이미지가 작은 경우에는 이미지를 요소 크기만큼 늘이면 배경 이미지 화질이 안 좋아진다.
자세한 내용은 https://scrimba.com/learn/frontend/background-images-co48b4b8f8f22b0951d7a616a?a=7182.14.2.L64_32 이 강의를 참고하자.
✨