[CSS] background 속성

 

📌 background 속성

: 배경의 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정하는 단축 속성

background: pink url(../images/coffee.png) no-repeat 20% 30% /100px 83px scroll;
/* 사이즈 앞에는 /(슬래시) 사용 */

background: url(../images/ani_flower_01.png) no-repeat 0 0, 
            url(../images/ani_flower_02.png) no-repeat 200px 100px, 
            yellow;
/* 배경색은 마지막에 선언해야 적용됨!!! */


body {
  background:
     url(sweettexture.jpg)    /* image */
     top center / 200px 200px /* position / size */
     no-repeat                /* repeat */
     fixed                    /* attachment */
     padding-box              /* origin */
     content-box              /* clip */
     red;                     /* color */
}

 

 

 

속성값 

• background-color: 배경 색상 지정
• background-image: 배경 이미지 지정
  여러 개의 배경 이미지는 쌓임 맥락에 따라 서로의 위에 놓인다.
  먼저 선언한 이미지가 위에 깔림
  
  - nrl("이미지 주소"): 해당 주소의 이미지로 지정
  절대 경로 지정: background-image: url(/폴더/파일명);
  
  - none: 배경 이미지 미지정
  

background-image: url("../../media/examples/lizard.png"), /* 상대 경로 */
                  url(/images/coffee.png); /* 절대 경로 */
                  
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("../../media/examples/lizard.png");

 

 

 

• background-size: 배경 이미지의 사이즈 지정
  이미지 화질 저하 주의!
  
  - contain: 세로로 폭 맞추기
  이미지 크기를 조정하지 않고 컨테이너 내에서 최대한 크게 조절
  컨테이너가 이미지보다 크면 이미지가 반복되어 채워진다. (반복을 원치 않으면 no-repeat 설정)
  
  - cover: 가로로 폭 맞추기
  이미지의 비율을 유지하면서 컨테이너를 채우는 가장 작은 크기로 조절
  배경의 비율이 요소와 다른 경우 이미지가 수직 또는 수평으로 자른다.
  
  - auto: 이미지를 조절하여 비율을 유지
  

background-size: contain;
background-size: 12px;

/* first value: width of the image, second value: height */
background-size: 50% auto;

/* Multiple backgrounds */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

 

 

 

• background-attachment: 배경 이미지를 뷰포트 내에 고정할지 스크롤 할지 지정
  - fixed: 배경을 뷰포트에 고정
  요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않는다.
  
  - local: 배경을 콘텐츠에 고정
  요소에 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤 된다.
  
  - scroll: 배경을 요소 자체에 고정 (기본값)
  요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않는다.
  

background-attachment: fixed;
background-attachment: local, scroll;

 

 

 

• background-clip: 배경이 차지(클리핑(clipping))할 영역으로 지정
  - border-box: 테두리(border)까지 적용 (기본값)
  - padding-box: 안쪽 여백(padding)까지 적용
  - content-box: 콘텐츠 영역 내부에 적용
  - text: 텍스트 위에 배치

 

 

 

• background-origin: 배경 이미지가 적용되는 요소의 상대적인 위치를지정
  배경 이미지가 표시될 때 요소의 border, padding, 콘텐츠 상자(content box) 중 어디를 기준으로 위치할지를 결정한다. 
  background-attachment가 fixed인 경우 background-origin은 무시된다.
  
  - border-box: 배경을 테두리 박스(border)를 기준으로 상대적으로 배치
  
  - padding-box: 배경을 안쪽 여백 박스(padding)를 기준으로 상대적으로 배치
  
  - content-box: 배경을 콘텐츠 박스를 기준으로 상대적으로 배치

background-origin: padding-box;
background-repeat: no-repeat;

 

 

 

• background-position: 배경 이미지의 위치 설정
  이 위치는 background-origin에 의해 설정된 위치 레이어를 기준으로 상대적이다. 
  - top/bottom/left/right 값 사용
  - 단위 사용

/* Keyword values */
background-position: top;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position:
  0 0,
  center;

/* Edge offsets values */
background-position: bottom 10px right 20px;

 

background-repeat: no-repeat; + background-position: 20% 30%;

 

 

* px은 왼쪽 상단을 기준으로 이미지 박스 자체가 이동
%는 전체 상자에서의 이미지 위치와 이미지 박스의 이미지의 위치도 설정을 기준으로 이동

background-position: 20% 30%;

 

 

 

• background-repeat: 배경 이미지의 반복 방법을 지정
  속성값은 x축, y축으로 2개 => 한 개 값으로 단축하여 사용 가능
  
  - repeat-x, repeat-y: 배경 이미지를 가로(x축) 방향으로 반복, 세로 (y축) 방향으로 반복
  
  - repeat: 요소의 배경 영역을 채울 때까지 이미지 반복
  마지막 반복 이미지가 영역을 넘을 경우 잘라낸다.
  
  - space:  요소가 잘리지 않을 만큼 이미지 반복 배치
  이미지를 추가 배치할 공간이 생기면 하나 더 추가한다.
  
  - round: 뱌경 영역이 늘어나면 반복되는 이미지도 늘어나서 여백을 남기지 않도록 배치
  
  - no-repeat: 배경 이미지를 반복하지 않도록 지정

background-repeat: repeat-x;
background-repeat: space;

background-repeat: round space;
background-repeat: no-repeat round;

 

repeat-x, repeat-y

 

---

참고

background | CSS-Tricks

 

CSS Backgrounds and Borders Module Level 3

 

background-attachment - CSS: Cascading Style Sheets | MDN

 

 

background-image - CSS: Cascading Style Sheets | MDN

 

 

background-size - CSS: Cascading Style Sheets | MDN

 

background-repeat - CSS: Cascading Style Sheets | MDN

 

background-origin - CSS: Cascading Style Sheets | MDN

 

 

background-position - CSS: Cascading Style Sheets | MDN

 

 

background-clip - CSS: Cascading Style Sheets | MDN