[CSS] 배경 및 이미지 관련 스타일 background

[CSS] 배경 및 이미지 관련 스타일 background

---

✔️ background-image

: 요소의 배경 이미지를 설정한다.

 

📓 속성

: none : 배경 이미지를 설정하지 않는다.

: <image> = url("경로"), url("경로") : 여러 개의 배경 이미지를 사용할 때 쉼표로 구분한다.

 

 

✔️ background-repeat

: 배경 이미지를 어떻게 반복할지 설정한다. 가로축 및 세로축으로 반복시키거나, 반복 시키지 않을 수 있다. 

: 반복 설정은 2개의 설정값을 주는데, 앞쪽은 가로, 뒤쪽은 세로 방향 반복 방향을 설정한다.

: space : 요소가 잘리지 않을 만큼 이미지를 반복한다. 

: round : 가용 영역이 늘어나면 반복 이미지도 늘어나서 여백을 남기지 않는다.

: no-repeat : 배경 이미지를 반복 적용하지 않고, 반복하지 않은 이미지의 위치는 background-position 속성으로 설정한다.

.bg1 {background-image: url("bg1.png");}

💡 배경이미지가 적으면 기본적으로 반복한다.

 

.bg2 {background-image: url("bg1.png"); background-repeat: repeat-x;}

💡 x 축 반복

 

.bg3 {background-image: url("bg1.png"); background-repeat: no-repeat;}
.bg4 {background-image: url("bg1.png"); background-repeat: no-repeat; 
	background-position: right center;}

💡 1) 반복하지 않으면 좌측 최상단 2) 반복하지 않고 오른쪽 중앙

 

 

-- 여러 개의 이미지를 설정할 경우, 먼저 설정한 이미지가 전면에 배치된다. (가장 앞쪽)

.box {
	width: 300px; height: 300px;
	padding: 10px; margin: 30px;
	border: 2px dotted gray;
}

.bg1 {background: url("bg1.png") no-repeat;}
.bg2 {background: url("bg1.png") no-repeat, url("bg2.png");}
.bg3 {background: url("bg3.png") no-repeat left top, 
	url("bg3.png") no-repeat right top,
	url("bg3.png") no-repeat left bottom,
	url("bg3.png") no-repeat right bottom;}

 

 

✔️ background-size

: 요소 배경 이미지의 크기를 설정한다.

 

📓 속성값

: auto : 배경 이미지의 원래 너비와 높이로 표시한다. (기본값)

: <length> 배경 이미지의 크기를 너비나 높이를 px 등의 단위로 설정한다. (첫번째는 width, 두번째는 height / 음수설정불가>

: <percentage> : 너비와 높이를 부모 요소에 비례한 백분율로 표시한다.

: cover : 배경 이미지의 크기 비율을 유지한 상태에서 부모 요소의 너비와 높이 중 큰 값에 배경 이미지를 맞춘다.

이때, 이미지의 일부가 보이지 않을 수 있다.

: contain : 배경 이미지의 크기 비율을 유지한 상태에서 부모 요소의 영역에 배경 이미지가 보이지 않는 부분없이 전체가 들어갈 수 있도록 스케일을 조정한다.

.bg1 {background-repeat: no-repeat;}
.bg2 {background-size: 300px 300px;}
.bg3 {background-size: 100% 100%;}
.bg4 {background-size: cover;}
.bg5 {background-size: contain;}

 

 

✔️ background-attachment

: 배경 이미지의 위치가 뷰포트 내에서 고정되는지 또는 포함하는 블록으로 스크롤되는지 여부를 결정한다.

 

📓 속성값

- scroll : 브라우저 화면을 스크롤하면 배경 이미지도 이동! (기본값)
- fixed : 브라우저 화면을 스크롤해도 배경이미지가 고정됨

- local : 배경은 요소의 내용에 따라 고정된다. 스크롤되면 배경도 이동한다.

body {
	background: url("bg5.png");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-attachment: fixed;
}