[css] background-image에 대해 알아보자🏞

웹페이지에 이미지 추가하는 2가지 방법

1. img 태그로 이미지 넣기
   • 구글, 네이버 등 이미지 검색에도 노출이 필요한 경우
   • 페이지에서 중요한 역할을 하는 경우
   • 프린트 했을 때 출력이 되어야 하는 경우
2. css의 background - image를 활용하여 이미지 넣기
   • 태그에 상관 없이 이미지 삽입 할 수 있음. p태그에 이미지를 넣으면 글자뒤에 배경 이미지가 깔리는 식

css의 background - image 넣는 방법

background-image: url("주소");

div 크기에 맞게 background-image 크기 조절하는 방법

background-size: ;

이미지의 크기를 div보다 작게 설정했을 경우 이미지가 반복되어 나온다.

이럴경우

background-repeat: no-repeat;

을 추가하면

이미지가 더이상 반복되지 않는다.

더 편리한 방법도 있다.

background-size: cover;

cover를 사용하면 어떠한 값을 지정하지 않아도 마치 잡지의 커버이미지를 보여주는 것 처럼div 안에서 적절하게 이미지가 배치된다.

css background properties

background-color 배경색을 지정할 수 있다
background-image 배경이미지를 삽입
background-position 배경이미지의 위치를 설정
background-size 배경이미지의 크기를 설정
background-repeat 배경이미지 어떻게 반복할건지
background-origin 속성은 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정
background-clip 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정
background-attachment