CSS 속성 알아보기 (배경)

 

background-color

 

background-color: 값;

background-color: red;
background-color: blue;

요소의 배경 색상을 지정하는 속성

 

기본값(transparent) - 투명함

색상 - 지정 가능한 색상 (red, blue 등)

 

background-image

 

background-image: url("경로");

background-image: url("./image/blue.png"); 
/* 기본적으로 바둑판식 반복 출력 */
/* background-repeat 속성의 값이 기본값이기 때문 */

요소의 배경 이미지를 삽입하는 속성

 

기본값(none) - 이미지 없음

url("경로") - 이미지 경로

 

background-repeat

 

background-repeat: 값;

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

요소의 배경 이미지 반복을 지정하는 속성

 

기본값(repeat) - 이미지를 수직, 수평 반복

repeat-x - 이미지를 수평 반복

repeat-y - 이미지를 수직 반복

no-repeat - 반복 없음

 

background-position

 

background-position: 값;

background-position: center;
background-position: top left;
background-position: 20px 50px;

요소의 배경 이미지의 위치를 지정하는 속성

 

기본값(0% 0%) - 0%~100% 사이 값

방향(방향1, 방향2) - top, bottom, left, right, center 방향

단위(x축, y축) - px, em, rem 등 단위로 지정

 

background-size

 

background-size: 값;

background-size: 100px;     
background-size: cover;
background-size: contain;

요소의 배경 이미지 크기를 지정하는 속성

 

기본값(auto) - 이미지의 실제 크기

단위 - px, em, rem 등 단위로 지정

cover - 비율을 유지, 요소의 더 넓은 너비에 맞춤

contain - 비율을 유지, 요소의 더 짧은 너비에 맞춤

 

background-attachment

 

background-attachment: 값;

background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

요소의 배경 이미지의 스크롤 특성을 지정하는 속성

 

기본값(scroll) - 이미지가 요소를 따라서 같이 스크롤

fixed - 이미지가 뷰포트에 고정, 스크롤 X