CSS Background

배경색과 배경 범위 지정하기

웹 문서의 전체 배경뿐만 아니라 텍스트, 목록 등 특정한 요소에도 배경 지정 가능

 

⭐ background-color 속성

배경색 지정

• 16진수 혹은 rgb값 또는 색상 이름 사용
• 세밀한 조절: 16진수 / 투명도 조절: rgba

기본형태

• background-color: #000000;
• background-color: rgb(0, 128, 0);
• background-color: green;

background-color는 상속되지 않는다.

글꼴, 글자 크기는 하위 요소에서 스타일을 수정하지 않느 한 상속

기본적으로 웹 문서 요소의 배경은 투명

>> body스타일로 지정한 문서 배경이그대로 비치는 것

>> 웹 요소에 배경색이 상속되지 않는다.

 

⭐background-clip 속성

배경색의 적용 범위 조절

• 박스 모델에서 테두리, 패당, 콘텐츠 영역까지 배경색 지정 가능

background-clip 속성값

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

예시

결과

배경 이미지 지정하기

웹 요소에 이미지 삽입 OR 목록의 불릿 이미지 대신 아이콘과 같은 이미지를 넣을 때 사용

⭐background-image 속성

웹 요소에 배경 이미지 삽입

• url( )에 이미지 파일 경로를 삽입하여 사용
  기본형태: backgroung-image: url('이미지 파일 경로')
• 이미지 파일 : *.jpg, *gif, *png 형식 사용 파일
  경로에는 작은 따옴표( ‘ ‘ ) 혹은 큰 따옴표 ( “ “ ) 사용
  상대경로 : 현재 웹 문서를 기준으로 지정
  절대 경로 : http://로 시작
• 요소보다 이미지 크기가 작을 경우
  >> 이미지가 가로와 세로로 반복되면서 요소의 배경을 채운다.

⭐background-repeat 속성

배경 이미지의 반복 방법을 지정

• 가로와 세로 중에서 어떤 방향으로 반복 할지 지정 OR 반복하지 않고 한 번만 삽입

background-repeat 속성값

• repeat : 브라우저 화면에 가득 찰 때까지 가로와 세로로 반복 (기본값)
• repeat-x: 브라우저화면 너비에 가득 찰 때까지 가로로 반복
• repeat-y: 브라우저 화면 너비에 가득 찰 때까지 세로로 반복
• no-repeat: 한 번만 표시하고 반복❌

예제

 

⭐ background-origin 속성

배경 이미지의 적용 범위를 조절

• 박스 모델에 패딩 혹은 테두리 적용된다.
  >> 배경 이미지를 패딩까지 표시 혹은 테두리까지 포함해서 표시한다.

background-origin 속성값

• content-box: 박스 모첵에서 내용 부분에만 배경 이미지를 표시(기본값)
• padding-box: 박스 모델에서 패딩까지 배경 이미지를 표시
• border-box: 박스 모델에서 테두리까지 배경 이미지를 표시

⭐ background- attachment 속성

배경 이미지 고정

• 배경이미지가 있는 웹 문서를 웹 브라우저에서 열고 스크롤 막대를
  위아래로 조절할 때 배경 이미지를 고정한다.

background-attachment 속성값

• scroll: 화면을 스크롤하면 배경 이미지도 스크롤 (기본값)
• fixed: 화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤

background 속성

background 속성으로 줄여서 사용가능

background-size 속성

배경 이미지 크기 조절 속성

• 배경을 채울 요소 크기에 비해 이미지가 작거나 클 경우 해당 속성을 사용해 이미지 크기 조절
  속성값이 하나일 경우 그 값은 너비로 인식
• 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산

background-size 속성값

• auto: 원래 배경 이미지 크기만큼 표시 (기본값)
• contain: 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대, 축소
• cover: 배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소
• <크기> : 이미지의 너비와 높이를 지정
• <백분율>: 배경 이미지가 들어갈 요소의 크리를 기준으로 값을 백분율로 지정
  그 크기에 맞도록 배경 이미지를 확대, 축소

예제