[CSS] backgound

background-color - 배경 색상

body{
	background-color: hsl(180, 50%, 80%);
}

background-image - 배경 이미지

body{
	background-image: url(/src/assets/images/rabbit.png);
}

background-repeat - 배경 이미지 반복 여부

body{
	/* 반복 안 함 */
	background-repeat: no-repeat;
    /* x축으로 반복 */
    background-repeat: repeat-x;
    /* y축으로 반복 */
    background-repeat: repeat-y;
}

background-position - 배경 이미지 위치

• 시작점은 항상 왼쪽 위
• background-position의 50%는 해당 body의 50% 지점을 찾고 background-image의 50% 지점을 찾아서 완전 중앙에 배치

body{
	background-position-x: 30px;
    background-position-y: 40px;
    
    /* 단축 표기법 */
    background-position: 50% 0;
}

background-attachment - 배경 이미지 고정 여부

body{
	/* 스크롤 하면 배경이 움직임 */
	background-attachment: scroll;
    
    /* 스크롤 해도 배경이 움직이지 않음 */
    background-attachment: fixed;
}

background-size - 배경 이미지 크기

body{
	/* 가로 사이즈를 자르지 않는 상태에서 최대로 늘리기 */
    /* 모바일 사이트에서 적용하기 좋다 */
    background-size: cover;
    /* 세로 사이즈를 자르지 않는 상태에서 최대로 늘리기 */
    background-size: contain;
    /* 원하는 크기 지정 8?
    background-size: 100px 130px;
}

background 단축 표기법

• , 로 다른 세트로 넘어갈 수 있음
• 먼저 선언한 배경 이미지가 위로 온다
• linear-gradient는 배경 이미지로 인식

body{
	background: 
    url(/src/assets/images/cloud.png) no-repeat 0 100px fixed,
    url(/src/assets/images/sun.png) no-repeat 150px 50px /150px 150px fixed,
    linear-gradient(red, green),
    pink;
}