[CSS] Background 속성

---

#1. Background 속성

1. Background 속성의 개념

background 속성이란?

• 컨텐츠의 배경을 정의하는 속성이다.
• 단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있다. (불필요한 요소는 생략 가능)

div {
  background: #000 url(파일경로) right top fixed repeat-x;
} /* 단축속성으로 여러가지 속성을 한번에 지정 */

 

2. background의 하위 속성

1) background-color

• 배경의 색상을 지정한다.

div {
  background-color: #fff;
} /* 배경색을 흰색으로 지정 */

 

2) background-image

• 배경의 이미지를 정의한다.
• 이미지는 url(파일경로) 형식으로 불러온다.
• 외부 css 파일에서 명시할 경우 파일 경로는 html 기준이 아닌 css 파일 기준이 된다.

div {
  background-image: url(파일경로);
}

 

3) background-repeat

• 배경 이미지의 반복 방법을 정의한다.

※ 사용 가능한 속성값

• repeat : 모든 방향으로 반복한다.
• repeat-x : 가로로 반복한다.
• repeat-y : 세로(수직)로 반복한다.
• no-repeat :  반복되지 않는다.

div {
  background-repeat: repeat-x;
} /* 이미지가 가로로 반복한다 */

 

4) background-position

• 배경 이미지의 위치를 정의한다.
• px 단위 값으로 지정하거나 left, right, top, bottom, center로 가로 세로 값을 구분하여 지정 할 수 있다.

div {
  background-position: right top;
} /* 이미지가 오른쪽 상단에 위치한다. */

 

5) background-size

• 배경 이미지의 크기를 정의한다.
• 가로축 크기, 세로축 크기를 공백으로 구분하여 지정한다.
• px 단위 값으로 사이즈 지정시 배경 이미지의 크기를 절대값으로 설정한다.
• % 단위 값으로 사이즈 지정시 자신이 표시될 박스 크기에 기준하여 백분율로 설정한다.

※ 사용 가능한 속성값

• cover : 가로우선, 이미지가 찌그러지지 않는 한도 내에서 최대 사이즈로 지정한다.
  • background-size: 100% 100%; 준것과 같은 효과
• contain : 세로우선, 이미지가 짤리지 않는 한도 내에서 최대 사이즈로 지정한다. (그 이상 넘어가면 repeat 처럼 된다.)

div {
  background-size: cover;
}

 

6) background-attachment

• 배경이미지가 같이 스크롤 되거나 고정시킬 수 있다. (스크롤에 따른 배경 이미지 처리)

※ 사용 가능한 속성값

• scroll : 배경 이미지가 페이지와 함께 스크롤 된다. (기본값)
• fixed : 배경 이미지가 스크롤 되지 않고 고정된다.

 

3. background 속성 활용

1) background 속성의 중첩 사용

• 콤마( , )로 구분하여 여러 겹의 배경을 지정할 수 있다.
• 마지막에 명시된 항목이 가장 뒤에 배치된다.

div {
  background: 
  url(파일경로) 하위속성1 하위속성2,
  url(파일경로) 하위속성1 하위속성2,
  url(파일경로) 하위속성1 하위속성2;
}

 

2) 이미지 클립핑

• 아이콘, 버튼 등의 이미지를 하나의 이미지 파일에 모두 모아 놓는다.
• 표시할 항목의 크기와 동일한 박스를 생성하고 그 안에 배경 이미지로 설정한다.
• background-position 속성으로 이미지를 표시하고자 하는 위치 까지 이동 시킨다.
• 아이콘, 버튼 등 이미지를 개별적으로 불러오는 것 보다 데이터 용량을 줄일 수 있다. (로딩 속도가 빨라진다)

아이콘 이미지를 하나의 이미지 파일에 모음

[HTML]
<ul id="icon_list">
  <li>
    <a href="#">
      <span class="icon" id="icon1"></span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon" id="icon2"></span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon" id="icon3"></span>
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon" id="icon4"></span>
    </a>
  </li>
</ul>


[CSS]
ul {
  list-style: none;
}

/* 개별 아이콘 박스 지정 */
#icon_list li {
  width: 100px;
  float: left;
}

/* 아이콘 그룹 박스 > 개별 아이콘 박스 > 링크 > 아이콘 박스 */
#icon_list li a .icon {
  /* 아이콘의 크기만큼 사이즈 지정 */
  display: block;
  width: 56px;
  height: 56px;
  /* 배경이미지 적용 및 중앙 정렬 */
  background: url(./img/icon.png) no-repeat;
  margin: auto;
}

/* 개별 아이콘 좌표 처리 */
#icon_list li a #icon1 {
  background-position: 0 0;
}
#icon_list li a #icon2 {
  background-position: -57px 0;
}
#icon_list li a #icon3 {
  background-position: -114px 0;
}
#icon_list li a #icon4 {
  background-position: -171px 0;
}

하나의 이미지파일로 아이콘 지정

 

4. gradient 속성값

1) -webkit-gradient

• -webkit-gradient 를 사용하여 그라데이션 효과를 줄 수 있다.
• 사용률이 높은 사파리, 크롬, 엣지 등에서 작동한다.

 background: -webkit-gradient(유형, 시작 위치, 끝 위치, 시작 색상, 종료 색상);
 
 div {
   background: -webkit-gradient(linear, left top, left bottom, from(#06f), to(#fff));
 }

 

2) -moz-linear

• -webkit-gradient 와 같은 기능을 하지만 파이어폭스 브라우저에서 작동한다.
• 파이어폭스는 사용률이 낮아서 거의 쓰이지 않는 기능이다.

background: -moz-유형-gradient:(시작위치 [각도], 시작색상, 종료색상);

div {
  background: -moz-linear-gradient(top 45deg, #06f, #fff);
}