background 속성

※ abc 순으로 정렬

 

● background 속성

 - 아래의 속성들을 한번에 설정함

 

● background-color 속성

 - 배경 색 지정

 - background-color: <rgb> | <색상 이름> | <16진수>

    - rgb 값 : 빛의 삼원색으로 빨간, 녹색, 파란색을 이용해서 색을 표시하는 방식 (각 값 당 255까지 가능)

        ※ rgba는 투명도 까지 가능한 값

    - 색상이름 : red, blue 처럼 색상 이름으로 표기

    - 16진수 : 16진수로 #000000 처럼 표기 가능 (ex : 파란색(#0000ff))

    ※ background-color 값은 상속되지 않음

 

● background-clip 속성 (참고 : 박스 모델)

 - 배경 적용 범위 조절

 - background-clip: border-box | padding-box | content-box

    - border-box : 배경의 적용 범위를 border 영역까지 적용

    - padding-box : 배경의 적용 범위를 padding 영역까지 적용

    - content-box : 배경의 적용 범위를 content 영역까지 적용

 

● background-repeat 속성

 - 배경 이미지 반복 방법 지정

 - background-repeat: repeat | repeat-x | repeat-y | no-repeat

    - repeat : 브라우저 화면이 가득 찰 때까지 배경 이미지를 가로와 세로로 반복

    - repeat-x : 브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복

    - repeat-y : 브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복

    - no-repeat : 배경 이미지를 한 번만 표시하고 반복하지 않음

 

● background-origin 속성 (참고 : 박스 모델) - 배경 이미지 배치할 기준 조절하기

 - background-origin: border-box | padding-box | content-box

    - border-box : 배경의 적용 범위를 border 영역까지 적용

    - padding-box : 배경의 적용 범위를 padding 영역까지 적용

    - content-box : 배경의 적용 범위를 content 영역까지 적용

 

● background-position 속성

 - 배경 이미지 위치 조절

 - background-position: <수평 위치> | <수직 위치>

    - <수평 위치>

        - left | center | right | <백분율> | <길이 값>

        - top | center | bottom | <백분율> | <길이 값>

 

● background-size 속성

 - 배경 이미지 크기 조절

 - background-size: auto | contain | cover | <크기 값> | <백분율>

    - auto : 원래 배경 이미지 크기만큼 표시

    - cotain : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 및 축소함

    - cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대 및 축소

    - <크기 값> : 너비 값과 높이 값을 지정

    - <백분율> : 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정