[CSS] background 배경

 background(배경) 정리

 

1) background-color : 배경색상

   -> transparent 투명함, 색상 : 지정 가능한 색상

 

2) background-image : 배경 이미지 삽입

   -> 기본 - none , url("경로") 이미지 경로

 

3) background-repeat : 배경 이미지 반복

   -> 기본 - repeat -이미지를 수직, 수평 반복

       repeat-x - 이미지를 수평 반복

       repeat-y 이미지를 수직 반복

       no-repeat 반복 없음

 

4) background-position : 배경 이미지 위치

   -> 방향 - top, bottom , left, right , center 

   -> 단위 - px, em, rem 등 단위 지정

 

5) background-size : 배경 이미지 크기

   -> auto - 이미지 실제 크기 

   -> 단위 - px, em, rem 등 단위로 지정 

   -> cover - 비율을 유지, 요소의 더 넓은 너비에 맞춤

   -> contain - 비율을 유지, 요소의 더 짧은 너비에 맞춤

 

6) background-attachment - 배경 이미지 스크롤 특성

   -> 기본 - scroll 이미지가 요소를 따라서 같이 스크롤

   -> fixed - 이미지가 뷰 포트에 고정, 스크롤 x 

   -> local - 요소 내 스크롤 시 이미지가 같이 스크롤

 

 

 

See the Pen by jinseoIT (@jinseoit) on CodePen.