30일차(2022.02.07) _ Background

Background

 

1. background-color : 배경색 지정

2. background-image : 이미지를 배경으로 지정
 1) url ( 이미지파일의 경로 )
  - 박스의 크기보다 이미지의 크기가 작을 때 이미지는 반복해서 나옴

3. background-repeat : 백그라운드이미지를 x, y 축 반복 (기본값)
  1) repeat-x : x축만 반복
  2) repeat-y : y축만 반복
  3) no-repeat : 반복하지 않음

4. background-size : 배경이미지의 크기지정
  1) width height : 너비와 높이순으로 값을 지정
  2) auto : 원본 이미지크기로 표시 (기본값)
  3) contain : Element안에 배경이미지가 다 들어오도록 이미지를 축소/확대
   - 항상 배경사이즈에 전체 이미지를 맞추기 이미지가 깨지진 않음
  4) cover : Element안에 배경이미지가 꽉 차도록 이미지를 축소/확대
   - 항상 배경에 이미지 크기와 상관없이 꽉 채우기때문에 이미지가 깨질 수 있음

 5) background-position : 배경이미지의 위치를 지정
  1) x축위치값 y축위치값
   - 위치값에는 수치, % 값 가능
   - x축위치값에는 left(왼쪽정렬), center(가운데정렬), right(우측정렬) 들을 값으로 주어도 됨
   - y축위치값에는 bottom(하단정렬), center(가운데정렬), top(상단정렬) 들을 값으로 주어도 됨