background 속성

.color-background {
  background: rgb(100, 100, 0) 
}
.img-background {
  background: url('/assets/img/css_style/road_image.jpg') repeat fixed right bottom;
}

배경 관련 속성에는 여러가지가 있는데 그중 background 속성을 사용하면 한번에 모든 속성을 지정할 수 있다.
다른 속성에 지정할 수 있는 속성값을 그냥 background 속성에 넣으면 된다.
관련 속성과 속성값은 다음과 같다.

  • background-color: 배경색 지정
    • 16진수: #ff00ff - 16진수 RGB 값 표기
    • RGB: rgb(255,0,255) - 10진수 RGB 값 표기
    • RGBA: rgba(0, 255, 0, 0.1) - RGB 값에 알파값 추가
    • HSL: hsl(240, 100%, 50%) - 앞에서부터 색상, 채도, 밝기
    • HSLA: hsla(240, 90%, 50%, 0.3) - HSL 값에 알파값 추가
    • 색상 이름: red, green, blue, … - 기본 색상 16가지는 이름으로 표기 가능
  • background-image: 배경 이미지 지정
    • url(파일경로) 로 배경 이미지 파일의 경로를 지정
  • background-size: 배경 이미지 크기 조절
    • auto: 원래 배경 이미지 크기만큼 표시
    • contain: 요소 안에 배경 이미지 다 들어오도록 확대/축소
    • cover: 배경 이미지가 요소 다 덮도록 확대/축소
    • <크기 값="">: 너비 및 높이 값을 지정. 너비만 지정하면 비율 맞춰서 자동으로 높이 지정됨
    • <백분율>: 원래 크기 기준으로 확대/축소
  • background-repeat: 배경 이미지 반복 여부 및 방향 지정
    • repeat: 브라우저 화면에 가득 찰 때까지 가로, 세로로 반복. default 값
    • repeat-x: 브라우저 창 너비와 같아질 때까지 가로로 반복
    • repeat-y: 브라우저 창 높이와 같아질 때까지 세로로 반복
    • no-repeat: 반복 안함
  • background-position: 배경 이미지 반복 안하는 경우 이미지 표시 위치 지정
    • <백분율>: 가로, 세로 위치를 %로 나타냄
    • <길이 값="">: 직접 길이로 위치 지정
    • <가로 위치="" 키워드="">: left, center, top 으로 가로 위치 지정
    • <세로 위치="" 키워드="">: top, bottom, center 로 세로 위치 지정
  • background-attachment: 배경 이미지를 고정
    • scroll: 화면 스크롤과 함께 배경 이미지도 스크롤. default 값
    • fixed: 화면 스크롤 해도 배경 이미지는 고정
  • background-clip: 박스 모델을 기준으로 배경 적용 범위를 지정
    • border-box: 박스 모델 가장 외곽 테두리까지 적용
    • padding-box: 박스 모델 테두리 뺀 패딩 범위까지 적용
    • content-box: 박스 모델에서 내용 부분에만 적용