FrontEnd/CSS
[CSS] background 배경
jinseoit
2021. 8. 5. 00:27
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 - 요소 내 스크롤 시 이미지가 같이 스크롤