[CSS기초] 8. CSS속성/배경

8. CSS속성/배경

8.1. background

값	의미	기본값
background-color	배경색상	transparent
background-image	하나이상의 배경 이미지	none
background-repeat	배경 이미지 반복	repeat
background-position	배경 이미지 위치	0  0
background-attachment	배경 이미지의 스크롤 여부(특성)	scroll
background-size	배경이지미 크기

 

*단축속성 사용법 – background : 색상 이미지경로 반복 위치 스크롤 특성;

ex) div{            background: red url(../google/image.png) no-repeat left top scroll; } div {            background-color : red; }

 

*background-repeat 값은 repeat, no-repeat, repeat-x, repeat-y가 있다.

*background-position 값

값	의미	기본값
%	왼쪽 상단 모서리는 0% 0% 오른쪽 하단 모서리는 0% 0%
방향	top, bottom, left, right, center
단위	px, em, cm

 

*background-attachment 속성값

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

 

*background-size 의 속성값

값	의미	기본값
auto	배경이미지가 원래 크기로 표시됨	auto
단위	px, em, %단위로 지정가능 ex) 100px 100px(넓이 높이)
cover	배경이미지의 크기 비율을 유지하며 요소의 더 넓은 너비에 맞춰짐 (이미지 잘릴 가능성이 있음)
contain	배경이미지가 비율을 유지하며 요소의 더 짧은 너비에 맞춰짐(이미지 잘릴가능성이 없음)

References: heropy.blog