css background 속성, 배경화면 이미지 관련 속성

---

background 관련 속성

1. background-color : 배경색 넣기

rgb 색상표 : https://html-color-codes.info/

사용방법

<style>
	#box1 {
		background-color : red;
	}
	
	#box2 {
		background-color : #01DF3A;
	}
	
	.box {
		width : 50px;
		height : 50px;
	}
</style>
<div class='box' id='box1'></div>
<br />
<div class='box' id='box2'></div>

2. background-image : 배경 이미지 넣기

*주의사항 : 상자의 크기만큼 이미지가 반복해서 출력. 한번만 출력하고 싶으면 background-repeat 사용.

사용방법

<style>
	#box1 {
		/* 이미지 주소 */
		background-image: url("/image/test.jpg");
	}
	
	.box {
		width : 100px;
		height : 100px;
	}
</style>
<div class='box' id='box1'></div>

3. background-repeat : 배경화면 이미지 반복여부 적용

속성 값 

• repeat 기본값이면서 가로 세로 반복
• no-repeat 반복 X
• repeat-x 가로 반복 출력
• repeat-y 세로 반복 출력

사용방법

<style>
	#box1 {
		/* 이미지 주소 */
		background-image: url("/image/test.jpg");
		/* background-repeat : repeat */
		/* background-repeat : repeat-x */
		/* background-repeat : repeat-y */
		background-repeat : no-repeat;
	}	
	
	.box {
		width : 100px;
		height : 100px;
	}
</style>
<div class='box' id='box1'></div>

4. background-position : 배경 이미지 좌표 수정

사용방법

<style>
	#box1 {
		/* 이미지 주소 */
		background-image: url("/image/test.jpg");
		background-repeat : no-repeat;
		/* background-position : X좌표 Y좌표 */
		/* background-position : center center; */
		background-position : -30px 30px;
	}	
	
	.box {
		width : 100px;
		height : 100px;
	}
</style>
<div class='box' id='box1'></div>

 

5. background-attachment : 스크롤 적용

속성값

• scroll: 전체 스크롤 시, 선택한 요소와 같이 움직임. 내용을 스크롤하면 배경 이미지는 스크롤 안됨.
• fixed : 움직이지 않음.
• local : 전체 스크롤 시, 선택한 요소와 같이 움직임. 내용을 스크롤하면 배경 이미지는 스크롤 됨.
• initial : 기본값으로 설정.
• inherit : 부모 요소의 속성값을 상속 받음.

사용방법

<style>
	#box1 {
		/* 이미지 주소 */
		background-image: url("/image/test.jpg");
		background-repeat : no-repeat;
		/* background-attachment : scroll; */
		/* background-attachment : fixed; */
		background-attachment : local;
	}	
	
	.box {
		width : 200px;
		height : 300px;
	}
</style>
<div class='box' id='box1'></div>

* fixed는 기준점이 달라서 두번쨰로 할 경우 사진이 잘린다

* 전체 스크롤 내렸을 경우 (fixed - scroll - local)

 

* 개인 스크롤 내렸을 경우 (fixed - scroll - local)