CSS 백그라운드 이미지

Minseok Ku·2022년 12월 27일

Html & CSS

목록 보기
16/18

백그라운드 이미지

  • 아름다운 페이지를 표현하는 제일 강력한 속성
  • 백그라운드 이미지를 사용하면 스타일만 제거했을 때 불필요한 이미지들이 대부분 사라짐
    -> 프린트할 때 유용
  • 표준 웹 페이지 는 백그라운드 이미지로 이미지를 대부분 표현한다.
  • 백그라운드 이미지 지정방법
background-image: 속성값;

백그라운드 이미지 반복

선택자 {
	background-repeat: 속성값
}


백그라운드 이미지 크기 설정

선택자 {
	background-size: 속성값
}


백그라운드 이미지 위치

선택자 {
	background-position: <수평위치> <수직위치>
    
background-position:right center
}


백그라운드 이미지의 스크롤 여부

선택자 {
	background-attachment: 속성값
}


백그라운드 이미지 적용방법

방법 1: 일반형

background-color: 속성값;
background-image: 속성값;
background-repeat: 속성값;
background-attachment: 속성값;
background-position: 속성값;

방법 2: 축약형

background: #022250 url(‘./img/back_img01.jpg') no-repeat fixed center center;

0개의 댓글