📐 CSS 배경 속성 요약!

 

CSS 배경 관련 속성

background-color - 배경 색 지정하기

background-image - 배경 이미지 지정

background-image: url('images/bg3.jpg')

배경 이미지 지정, 상대경로, 절대경로, url 사용 가능

 

🐍 background-image와 img 태그 차이점

• img 태그 : seo, 성능, 웹 접근성 좋다
• 백그라운드 이미지 css : 디자인적으로 조작할 때 더 편리

 

background-clip - 배경 적용 범위 조절하기

background-clip : border-box | padding-box | context-box

• border-box : 박스 모델의 가장 외곽인 테두리까지 적용
• padding-box : 박스 모델에서 테두리를 뺀 패딩 범위까지 적용
• content-box : 박스 모델에서 내용 부분에만 적용

 

background-origin - 배경 이미지 배치할 기준 조절하기

background-origin : border-box | padding-box | context-box

• border-box : 박스 모델의 가장 외곽인 테두리가 기준
• padding-box : 박스 모델에서 테두리를 뺀 패딩이 기준
• content-box : 박스 모델에서 내용 부분이 기준

 

background-position - 배경 이미지 위치 조절하기

background-position : <수평위치> <수직위치>;

• 수평 위치 : left | center | right | <백분율> | <길이 값>
• 수직 위치 : top | center | bottom | <백분율> | <길이 값>

 

background-size - 배경 이미지 크기 조절하기

background-size : auto|contain|cover|<크기값>|<백분율>

• auto : 원래 배경 이미지 크기만큼 표시
• contain : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소
• cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소
• <크기 값> : 너비값과 높이 값을 지정. 너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정. ex)200px 150px
• <백분율> : 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고 그 크기에 맞도록 배경 이미지를 확대하거나 축소 ex)60% 40%

 

background-repeat - 배경 이미지 반복 방법 지정하기

• repeat : 브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복
• repeat-x : 브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복
• repeat-y : 브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복
• no-repeat : 배경 이미지를 한 번만 표시하고 반복하지 않음

 

background-attachment - 배경 이미지 고정하기

• scroll : 화면 스크롤과 함께 배경 이미지도 스크롤 기본값입니다.
• fixed : 화면이 스크롤되더라도 배경 이미지는 고정

 

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

background : url('images/bg3.jpg') no-repeat fixed right bottom;