#20 - CSS 기초 - 배경

배경 속성 설명

속성 예시

/*---- 색 이미지경로 반복 위치 스크롤특성 ----*/
.background{
    background : black url('img/main.png') no-repeat right bottom scroll;
}

/*---- 이미지경로 반복 위치 + 다중 이미지 사용 ----*/
.background{
    background : url('img/main.png') no-repeat right bottom,
        url('img/main.png') no-repeat right bottom,
        url('img/main.png') no-repeat right bottom;
}

/*---- 색 ----*/
.background{
    background : black;
}

 

속성 설명

속성	개별 속성	의미	값
background	-	배경 관련 속성 설정
	background-color	배경의 색을 지정	rgb(0, 0, 0) rgba(0, 0, 0, .5) black, transparent #000000
	background-image	배경에 이미지를 삽입. 1개 이상 삽입 가능	url('경로')
	background-repeat	배경 반복 여부 설정	repeat, repeat-x, repeat-y,no-repeat
	background-position	배경의 위치를 설정. 숫자와 방향을 혼용사용 할 경우, x축 y축 기준으로 입력 속성 예시 background-position : 방향1 방향2; background-position : x축 y축;	방향 : left, right, top, bottom, center 숫자+단위
	background-attachment	영역 내 이미지가 넘칠 경우, 스크롤 처리 설정	scroll, fixed, local
	background-size	배경 크기 설정. cover : 요소의 더 넓은 너비에 맞춰짐 contain : 요소의 더 짧은 너비에 맞춰짐 속성 예시 background-size : 가로크기 세로크기;	auto, 숫자+단위, cover, contain