[css] background 관련 정리

1. background-color

배경의 생상을 정의 할 수 있다. 기본적으로 제공되는 색상을 사용하거나 헥사코트(ex. #000000 ) 또는 RGB or RGBA  를 사용하여 생상 및 opacity값을 수정 할 수있다.

div {
	background-color: #fff; // 동일한 코드가 6개라면 3개로 축약 할 수 있다.
}
div {
	background-color: rgb(125, 125, 125);
}
div {
	background-color: red; //다양한 기본 값이 존재한다.
}

// rgba를 사용하영 opacity 제어

div {
	background-color: black;
    opacity: .6;
}
div{
	background-color: rgba(0, 0, 0, .6);
}

 

2. background-image

html에서  <img /> 테그를 사용하지 않고 css 를 사용하여 배경에 이미지를 삽입 할 수 있다.

div {
	background-image: url('/이미지의 경로 입력');
}

 

3. background-repeat 

background-image 를 사용 할 때, 사용되어지는 공간에 여백이 있다면 자동으로 반복된다. 이럴때 이런 반복을 제어 할 수 있다.

div {
  background-image: url('...');
  background-repeat: no-repeat; // x-repeat, y-repeat 
}

 

4. background-position 

background-image 의 위치를 수동으로 제어 할 수 있다.

x,y 의 두 값을 입력 할 수 있고 하나만 입력한다면 y축의 값은 center로 자동 변환 된다.

div {
  background-image : url('...');
  background-position: 50%; // 왼쪽에서 50% 이동 상하 값은 center로 고정
}
div {
  background-image : url('...');
  background-position: right bottom;
}
div {
  background-image : url('...');
  background-position: -300px; 50px;
}

 

5.background-attachment

이미지의 스크롤 여부를 제어한다. default값은 scroll이지만 배경을 고정 후 움직이는 효과를 줄때 fixed 를 사용하여 고정 시킨다.

 

6.background

위에서 설명한 모든 속성을 한번에 입력 할 수 있는 단축어 이다. 

div {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

div {
  background: #ffffff url("img_tree.png") no-repeat right top;
}