html css 배경

배경

1. background-image

배경이미지 설정

• url(이미지경로) :
  bckground-image : url('images/logo.png');

2. background-repeat

• repeat-x : 좌 -> 우 반복
• repeat-y : 위 -> 아래 반복
• no-repeat : 반복없음

3. background-size

• auto : 이미지 원본 그대로 출력
• contain : 이미지를 영역 안으로 축소/확대
• cover : 이미지를 영역 안으로 채우기
• 크기값 : background-size : 너비 높이
  너비 하나만 설정하면 높이는 자동계산
• 백분율 : background-size : 50%

4. background-position

배경 이미지 배치

• background-position: <수평 위치> <수직 위치>;
  수평 : left-왼쪽, right-오른쪽, center-중앙
  수직 : top-위, bottom-아래, center-중앙

5. background-origin

이미지 배치 기준

• border-box : 경계선 부터 배치 - 기본값
• padding-box : 내부 여백 부터 배치
• content-box : 내용 영역 부터 배치

6. background-attachment

• scroll : 배경 이미지도 스크롤(기본값)
• fixed : 배경 이미지 고정

7. background

속성 하나로 배경 이미지 제어하기

• background : 색상 이미지(url..) 반복(repeat) attachment position
  색상, 이미지 -> 둘중 하나는 필수