Ch 8. CSS 속성- 배경

배경

image

1
2
3
4
5
6
7
8
9

div {
  background-color: orange;
  width: 200px;
  height: 200px;
  background-image: url(https://user-images.githubusercontent.com/71930280/235451440-2f238ca6-f01a-4a8d-a1ab-bf7426239a00.png);
  background-size: 150px;
  background-repeat: no-repeat;
  background-position: center;
}

background-image: background-image: url(”경로”)

  • 영역의 사이즈보다 큰 경우 잘린다.

background-size: 배경 이미지 사이즈

  • 영역 사이즈 보다 작은 경우 반복된다.
  • auto: 이미지 실제 크기
  • cover: 비율 유지, 요소의 더 넓은 너비에 맞춤
  • contain: 비율 유지, 요소의 더 짧은 너비에 맞춤

background-repeat: 배경 이미지 반복

  • repeat: 수직,수평 반복
  • repeat-x: 수평 반복
  • repeat-y: 수직 반복
  • no-repeat: 반복 없음

background-position: 배경 이미지 위치

  • 방향: top, bottom, left, rightm center
  • 단위: px, em, rem…

background-attachment

1
2
3
4
5
6
7
8
9
10
11
12

body {
  height: 3000px;
}
div {
  background-color: orange;
  height: 400px;
  background-image: url(https://user-images.githubusercontent.com/71930280/235451440-2f238ca6-f01a-4a8d-a1ab-bf7426239a00.png);
  background-size: cover; //body의 넓이에 맞춰진다.
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

background-attachment: 배경 이미지 스크롤

  • scroll: 이미지가 요소를 따라서 같이 스크롤
  • fixed: 이미지가 뷰포트에 고정, 스크롤 x