[CSS]속성-배경

- background

 요소의 배경을 설정

  background-color        배경 색상  //  기본값: transparent

  background-image       하나 이상의 배경 이미지  //  기본값: none

  background-repeat       배경 이미지의 반복  //  기본값: repeat

  background-position     배경 이미지의 위치  //  기본값: 0 0

  background-attachment 배경 이미지의 스크롤 여부  //  기본값: scroll

 

 사용법

  background:  색상 이미지경로 반복 위치 스크롤특성;

.box1 {
  background: red url("../img/image.png") no-repeat left top scroll;
} /* 색상 이미지경로 반복 위치 스크롤*/
.box2 {
  background: url("../img/image.png") no-repeat right 100px;
} /* 이미지경로 반복 위치 */
.box3 {
  background: red;
} /* 색상 */

 

- background-color

 요소의 배경 색상을 지정 // 기본값: transparent

 단축속성: background

 

- background-image

 요소의 배경에 하나 이상의 이미지를 삽입 // 기본값: none

 사용법: url("경로")

background-image: url("경로");

.box {
  background-image: url("경로")
}
.box2 {
  background: url("경로") no-repeat, 100px 50px;
}

다중이미지 삽입시 먼저 삽입한 이미지가 가장 위로 올라온다.

왼쪽상단 기준으로 반복적으로 출력된다. 반복을 원하지 않으면 no-repeat를 적용해야 한다.

width, height로 영역을 설정해주지 않으면 이미지가 보이지 않는다.

 

- background-repeat

 배경 이미지의 반복을 설정 // 기본값: repeat

 repeat   배경 이미지를 수직, 수평으로 반복 

 repeat-x 배경 이미지를 수평으로 반복

 repeat-y 배경 이미지를 수직으로 반복

 no-repeat 배경 이미지 반복X

 

- backgroudn-position

 배경이미지의 위치를 지정

 방향: right, top, bottom, left, center

 값: % // 왼쪽 상단 0% 0% // 오른쪽 하단 100% 100%

 단위: px, em 등

 사용법

값이 방향일 경우
background-position: 방향1, 방향2;

값이 단위(%, px 등)일 경우
background-position: x축 y축;

 

- background-attachment

 요소가 스크롤될 때 배경 이미지의 스크롤 여부 지정 // 기본값: scroll

 scroll   배경 이미지가 요소를 따라서 같이 스크롤 됨

 fixed   배경 이미지가 뷰포트에 고정되어, 요소와 같이 스크롤되지 않음

 local   요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨

 

- background-size

 배경 이미지의 크기를 지정 // 기본값: auto

 단위: px, em, % 등

        width height 형태로 입력 가능 // width만 입력하면 알아서 비율에 맞춰서 출력

 cover   배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐, 이미지가 잘릴 수 있음.

 contain 배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐, 이미지가 잘리지 않음.

 

 width: 500px; height: 300px;    => background-size: contain; -> 300px에 맞춰서 이미지 출력

                                              background-size: cover; -> 500px에 맞춰서 이미지 출력

 

 

 

 

 

 

#패스트캠퍼스