속성 - 배경

단축속성

background: 색상 이미지경로 반복 위치 스크롤특성;

 

background-color: 요소의 배경 색상을 지정

기본값: transparent(투명)

 

background-image: 요소의 배경에 하나 이상의 이미지를 삽입

기본값: none(이미지 없음)

url("경로") - 이미지 경로(URL)

배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있다.

하나 이상의 배경 이미지 삽입할 경우 ,로 구분. 먼저 작성된 이미지가 더 위에 쌓임

이미지 반복적으로 출력됨 => background

 

background-repeat: 배경 이미지의 반복을 설정

값	의미	기본값
repeat	배경 이미지를 수직, 수평으로 반복	repeat
repeat-x	배경 이미지를 수평으로 반복
repeat-y	배경 이미지를 수직으로 반복
no-repeat	반복 없음

 

background-position

배경 이미지의 위치를 설정

값	의미	기본값
%	왼쪽 상단 모서리는 0% 0% 오른쪽 하단 모서리 100% 100%	0%(x축) 0%(y축)
방향	방향을 입력하여 위치 설정 top, bottom, left, right, center
단위	px, em, cm 등 단위로 지정

 

backgorund-attachment

요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정

값	의미	기본값
scroll	배경 이미지가 요소를 따라서 같이 스크롤 됨	scroll
fixed	배경 이미지가 뷰포트에 고정되어, 요소와 같이 스크롤 되지 않음
local	요소 내 스크롤시 배경 이미지가 같이 스크롤 됨

 

background-size

값	의미	기본값
auto	배경 이미지가 원래의 크기로 표시됨	auto
단위	- px, em, % 등 단위로 지정 - width height 형태로 입력 가능 - width 만 입력하면 비율에 맞게 지정됨
cover	- 배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐 - 이미지가 잘릴 수 있음
contain	- 배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐 - 이미지가 잘리지 않음

 

출처. heropy.blog/