[CSS] Background-image 관련 정리

background-img

background-image:url();

백그라운드 이미지 삽입

background-repeat

배경이미지의 반복 여부와 방식을 설정

background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;

no-repeat : 반복하지않음
repeat-x : 가로로만 반복
repeat-y : 세로로만 반복
repeat : 가로와 세로 모두 반복

background-size

배경 이미지의 크기 조정

background-size: auto;
background-size: cover;
background-size: contain;
background-size: 100px 200px;

auto(default): 원본 이미지 크기 유지
cover: 배경 이미지가 요소를 가득 채우도록 크기 조정
contain: 배경 이미지가 요소안에 전체적으로 보이도록 크기를 조정
px, %: px이나 백분율로 지정 가능

background-attachment

배경 이미지가 요소 안에 전체적으로 보이도록 크기를 조정

background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
background-attachment: inherit;

scroll: 배경 이미지가 요소와 함께 스크롤
fixed: 배경 이미지가 요소에 고정
local: 배경 이미지가 요소 내에서 스크롤 되며, 다른 요소나 페이지의 스크롤과는 독립적으로 배경 이미지가 움직여집니다.
inherit: 부모 요소로부터 배경 이미지의 스크롤 동작을 상속

background-clip

이미지 또는 색상이 요소의 어느 영역에 적용되는지 지정하는데 사용

background-clip: content-box;

이미지가 패딩 영역안에 들어가게 설정을 할려면 background-clip: content-box를 사용해야한다.

background-blend-mode

CSS에서 배경 이미지와 배경 색상을 혼합(blend)하는 데 사용되는 속성

• 예시) 만약 백그라운드 이미지 위에 텍스트( 흰색 글씨 )를 사용할 때 해당 이미지의 밝기로 인해 글씨가 잘 보이지 않는 경우

background-color: rgba(0, 0, 0, 0.5); 
background-blend-mode: multiply;