CSS_배경

배경

요소의 배경을 지정하는 CSS 속성

background-color

요소의 배경에 색상을 지정

background-image

요소의 배경 이미지를 한 개, 혹은 여러개 지정함

📍이미지 중첩하기

background-image: url("이미지 경로"), url("이미지 경로2")

📍그라데이션 배경 만들기

background-image: liner-gradient(방향, 시작색상, 종료 색상)

background-position

요소의 배경 이미지의 위치를 지정

/* 다섯가지 키워드를 조합해서 위치를 지정합니다 */
background-position: center;
background-position: top right;
background-position: left;
background-position: bottom center;

/* x축과 y축 수치 직접입력 */
background-position: 50px 24px; (각각 x축 y축)

background-repeat

요소의 배경 이미지의 반복 여부와 반복 영향을 지정함.

background-repeat: no-repeat | repeat | repeat-x | repeat-y

background-size

요소의 배경 이미지의 크기를 지정함.

background-size: cover | auto | contain

/* 직접 픽셀을 정해줄 수도 있습니다. */
background-size: 200px 120px

background-attatchment

요소의 배경 이미지의 스크롤 여부를 지정함

background-attachment: fixed | scroll(기본값) | local

background 단축속성

background 관련 속성들을 한번에 지정할 수 있음

/* background : color imageUrl repeat position/size attachment */
background : red url("이미지 경로") no-repeat center/cover fixed

object-fit

<img> 나 <video>등 대체요소의 내용이 지정된 규격과 맞춰지는 방식을 지정

object-fit : cover / fill(기본값) / contain / none

object-position

<img> 나 <video>등 대체요소의 콘텐츠 정렬 방식을 지정함.

object-position : 100px 40px