CSS - 배경 색상 (또는 이미지) 설정

background-color 속성은 배경 색상을 설정할 때 사용합니다.

background: blue;

or
 
background-color: blue;

배경에 색상 대신 이미지를 사용할 수 있습니다.

속 성	설 명
background-image	배경 이미지를 지정. url | none 중 하나 Ex.1) background-image: url("파일명"); Ex.2) background-image: none;
background-clip	배경 적용 범위를 조절함. border-box: 테두리까지 배경으로 채움. 기본값 padding-box: padding까지 배경으로 채움. content-box: 내용 부분만 배경으로 채움.
background-repeat	특정 요소에 배경 이미지를 반복적으로 지정할 때 사용. repeat: 이미지를 상하좌우 모든 방향으로 반복 tile: 이미지를 상하좌우 모든 방향으로 반복 repeat-x: 이미지를 오른쪽에서 왼쪽으로 반복 repeat-y: 이미지를 위에서 아래로 반복 no-repeat 이미지를 반복시키지 않음
background-attachment	배경 이미지를 화면에 고정할 것인가를 선택. 일반적으로 body 에 많이 적용. fixed | scroll 중 하나. 기본 값: scroll
background-size	배경 이미지의 크기를 조절 auto: 원본 이미지를 원래 크기로 표시. contain: 요소 전체를 덮지만 늘어지거나 잘리지 않음.   이미지를 온전히 볼 수 있는 이미지. cover: 이미지가 잘리거나 늘어져도 해당 요소 전체를 덮을 수 있도록 크기를 조절. 크기: 이미지의 가로/세로 크기를 조정   <가로> <세로> 순으로 기술.   하나의 값만 설정하면 세로 값은 "auto" 가 됨. 백분율: 폭과 높이로 설정.   하나의 값만 설정하면 세로 값은 "auto"가 됨
background-position	배경 이미지의 시작 위치를 설정. 수평 시작 위치: 백분율 | 길이 | left | center | right 중 하나 수직 시작 위치: 백분율 | 길이 | top | center | bottom 중 하나 수치로 위치 설정할 때는 <수평> <수직>순으로 함. 50% 60%: 왼쪽으로 50%, 위로부터 60%에 위치.   왼쪽 값만 지정시 위쪽 값은 자동으로 50% 로 설정. 50px 60px: 왼쪽으로 50픽셀, 위로부터 60픽셀에 위치. top, center, bottom: 위쪽, 가운데, 아래쪽 중의 한 곳에 위치. left, center, right: 왼쪽, 가운데, 오른쪽 중의 한 곳에 위치.  Ex.) background-position: <수평 위치> <수직 위치> 형식
background-origin	배경 이미지의 시작점을 지정. border-box: 테두리의 왼쪽 상단부터 시작함. padding-box: padding 가장자리의 왼쪽 위 모퉁이에서 시작함. 기본값. content-box: 내용의 왼쪽 상단부터 시작함.
background	다음 속성들을 한꺼번에 묶어 지정함. background-color background-image background-repeat background-attachment background-position background-clip background-origin background-size Ex.) background: white url(bgimage.gif) fixed center;

background-clip 속성

이미지를 padding 까지 배경을 채울지 border 까지 채울지를 설정할 수 있습니다.

content -> padding -> border 순서

첫 번째 그림은 content-box 이고, 두 번째는 padding-box, 마지막으로 border-box 를 적용한 결과입니다.

<style>
.clip {
  padding: 15px;
  border: 10px dotted #000000;
  background-color: yellow;  

  /* 내용 부분만 배경으로 채움니다. */
  background-clip: content-box;
}
</style>

<button class="clip">버튼입니다.</button>

background-repeat 속성

문서 전체에 배경 이미지를 반복 설정합니다.

body {
  background-image: url(ara.jpg);
  background-repeat: repeat;
}

background-attachment 속성

이미지를 fixed 설정했으므로 스크롤해도 이미지가 고정되어 보입니다.

body {
   background-image: url(ara.jpg);
   background-repeat: repeat-y;
   background-attachment: fixed;
}

background-size 속성

이미지의 크기를 조정합니다.

body {
   background-image: url(ara.jpg);
   background-size: 150px 320px;
}

다음은 cover 와 contain 의 예제입니다. 첫 번째는 cover 를 사용한 결과이고, 두 번째가 contain 을 사용한 결과입니다.

cover 와 contain 의 결과

body {
   background-image: url(ara.jpg);
   background-size: cover;
}

background-position 속성

보통 <수직> <수평> 순이지만 수치로 위치 지정할 때는 <수평> <수직>순이 됩니다.

body {
   background-image: url(ara.jpg);
   
   /* <수직> <수평> 순으로 시작 위치 지정*/
   background-position: top center;
}

body {
   background-image: url(ara.jpg);
   
   /* <수평> <수직> 순으로 시작 위치 지정*/
   /* 수평 100px 부터, 수직 50px 부터 */
   background-position: 100px 50px;
}

가로 값만 지정하면, 세로 값은 자동으로 50%가 됩니다. 길이와 백분율의 섞어쓰기는 허용되지만, 이때 길이는 10% -2cm 처럼 음수만 가능합니다. 그러나 일반적으로 백분율과 길이의 섞어쓰기는 허용되지 않습니다.

body {
   background-image: url(ara.jpg);
   background-position: 10% -2cm;
}

background-origin 속성

배경 이미지의 시작점을 지정합니다.

content -> padding -> border 순서

<style>
.clip {
  color: #fff;
  padding:25px;
  border:10px dotted #000000;
  background-image:url('ara.jpg');

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

}
</style>

<button class="clip">버튼입니다.</button>

background 속성

background 속성은 위 속성들을 하나로 지정하는 속성입니다.

body {
   background: red url(ara.jpg) fixed center;
}

위 예제를 풀이하면 다음과 같습니다.

body {
   background-color: red;
   background-image: url(ara.jpg);
   background-attachment: fixed;
   background-position: center;
}