달밤에 코딩하기/HTML CSS 공부하기
#20 - CSS 기초 - 배경
Rosa.Kim
2021. 5. 13. 22:42
배경 속성 설명
속성 예시
/*---- 색 이미지경로 반복 위치 스크롤특성 ----*/
.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 |