TIL (2021.12.27) - [CSS] Background(배경)

background

• background-color : 배경 색 지정 (상속되지 않음)

• background-repeat : 배경 이미지 반복 지정하기

  • background-repeat: repeat : 화면에 가득 찰 때까지 배경이미지를 가로 세로로 반복. 기본값.
  • background-repeat: repeat-x : 브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복
  • background-repeat: repeat-y : 브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복
  • background-repeat: no-repeat : 반복X

• background-image: url("경로") : 배경 이미지 삽입

• background-size: 배경 이미지 크기 조절. 기본값은 auto로 이미지의 실제 크기이다.

  • background-size: cover : 배경 이미지로 요소를 모두 덮도록 요소의 이미지를 확대하거나 축소한다. 요소의 더 넓은 너비에 맞춰진다.
  • background-size: contain : 요소 안에 배경 ㅣ미지가 다 들어오도록 이미지를 확대하거나 축소한다. 요소의 짧은 너비에 맞춰진다.

body {
  background-image: url('https://cdn.pixabay.com/photo/2021/12/20/15/01/christmas-tree-6883263_1280.jpg');
  background-size: cover;
}

p {
  background-color: #D3E4CD;
}

.bg1 {
  background-image: url('https://cdn.pixabay.com/photo/2016/11/29/03/44/animal-1867125_1280.jpg');
  background-repeat: repeat-x;
}

• background-position: 배경 이미지 위치 조절.
  • background-position: top
  • background-position: bottom
  • background-position: left
  • background-position: right
  • background-position: center
  • x축, y축으로 단위나 백분율을 표시해서도 위치 조절이 가능하다.

.bg2 {
  background-image: url('https://cdn.pixabay.com/photo/2016/11/29/03/44/animal-1867125_1280.jpg');
  background-position: center;
}

.bg3 {
  background-image: url('https://cdn.pixabay.com/photo/2016/11/29/03/44/animal-1867125_1280.jpg');
  background-position: 30% 60%;
  /*가로 30%, 세로 60%인 위치 설정*/
}

.bg4 {
  background-image: url('https://cdn.pixabay.com/photo/2016/11/29/03/44/animal-1867125_1280.jpg');
  background-position: 20px 30px;
  /*가로 20px, 세로 30px 위치 설정*/
}

• background-attachment : 배경 이미지 고정.
  • background-attachment: scroll : 스크롤과 함께 배경 이미지도 스크롤 됨. 기본 값임.
  • background-attachment: fixed : 이미지가 뷰포트에 고정되어 스크롤 해도 이미지는 고정