[CSS] Background

background

background는 단축 속성으로 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 지정할 수 있다.

 

하위 속성

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

background-attachment

배경 이미지를 뷰포트내에서 고정할지, 자신의 컨테이닝 블록과 함께 스크롤할지 결정한다

• fixed
  • 배경을 뷰포트에 대해 고정한다. 요소와 배경은 함께 스크롤되지 않는다
• local
  • 배경을 요소 콘텐츠에 대해 고정한다
  • 요소를 스크롤하면 배경이 콘텐츠와 같이 스크롤된다
  • 배경 페인트 영역과 배경 위치 영역은 스크롤 가능 영역이 기준점이다.
• scroll (초기값)
  • 배경을 요소 자체에 고정한다
  • 요소를 스크롤하더라도 배경은 콘텐츠와 같이 스크롤되지 않는다
    요소 테두리에 배경을 붙인거라고 이해하면 좋다고 한다

background-clip

요소의 배경이 어느 부분까지 차지할지 지정한다

• border-box (초기값)
  • 배경이 테두리까지 차지한다
• padding-box
  • 배경이 padding 영역까지 차지한다
• content-box
  • 배경이 요소의 콘텐츠 부분까지만 차지한다

 

background-color, background-image

각각 배경의 색상, 이미지를 설정

background-origin

배경 위치 시작점을 지정한다

배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정한다

위 그림에서 빨간색 테두리는 콘텐츠 영역을 가리킵니다.

• border-box
  • 배경을 border 영역에 대해 상대적으로 배치시킨다
• padding-box (초기값)
  • 배경을 padding 영역에 상대적으로 배치시킨다
• content-box
  • 배경을 콘텐츠 박스에 상대적으로 배치한다

background-position

배경의 위치를 지정할 수 있다.

background-position : offset-x offset-y;
background-position-x : value;
background-position-y : value;

 

background-repeat

배경 이미지를 어떻게 반복할지 결정한다

이미지 출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

단일값으로 설정할 수도 있고, 위 사진에서 보이듯이 수평, 수직 각각 설정할 수도 있다.

background-repeat : keyword;

background-repeat : 수평 수직;

• repeat-x : x축 방향으로 반복
• repeat-y : y축 방향으로 반복
• repeat (초기값)
• space : 배경 패턴을 채우고 여백은 공백처리
• round : 여백없이 배경 패턴을 채움
• no-repeat : 반복하지 않음

 

background-size

기본적으로 background-size는 키워드가 아니면 두개의 값을 받게된다

만약 하나의 값을 받게된다면 그 값은 너비를 조절하고 높이는 초기값인 auto를 갖게된다

background-size : auto auto

background-size : length(percentage)

background-size : x y

• contain
  • 이미지를 자르거나 늘리지 않고 컨테이너박스 내에서 최대한 크게 조정한다
• cover
  • 이미지의 비율을 유지하면서 컨테이너를 채울 수 있는 가장 작은 크기로  조정하여 빈 공간을 남기지 않는다
  • 배경의 비율이 요소와 다른 경우 이미지가 세로 또는 가로로 잘린다
• auto (초기값)
  • 기본 비율이 유지되도록 해당 방향으로 배경 이미지의 크기를 조정한다
• length , percentage
  • 값만큼 해당 차원으로 이미지를 조절한다
• 더 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size