CSS 기초 강좌 - 6강. 알록달록 배경이미지를 지정해보자.

background-color : 배경색 지정

배경색을 지정하는 속성입니다. 색상 이름이나 코드 값을 넣을 수 있습니다.

예제)

body {background-color:#eeeeee;}

#wincomi {background-color:skyblue}

background-image : 배경 이미지 지정

배경 이미지를 지정하는 속성입니다. 이미지 경로를 입력하시면 됩니다.
이미지 경로는 url(“~~”)로 입력합니다.

예제)

body {background-image:url(“./images/wincomi_bg.jpg”);}

background-repeat : 배경 이미지가 반복되는 방법

배경이 반복되는 방법을 지정하는 속성입니다. 아래 중 하나를 입력하시면 됩니다.

패턴일 경우에는 repeat을 쓰시면 됩니다.

repeat (기본)	모두 반복
repeat-x	x축(수평 방향)만 반복
repeat-y	y축(수직 방향)만 반복
no-repeat	반복 안 함

예제)

body {background-image:url(“./images/wincomi_bg.jpg”); background-repeat:no-repeat;}

background-attachment : 배경 이미지 고정 방법

배경 이미지를 고정/스크롤을 정하는 속성입니다. 두 가지 중 하나를 입력하시면 됩니다.

scroll (기본)	스크롤에 따라 스크롤
fixed	고정

예제)

body {background-attachment:fixed;}

정말 예제)

background-attachment:fixed;

 

 

 

background-attachment:fixed;

 

 

 

background-attachment:fixed;

background-position : 배경 이미지 위치

배경 이미지 위치를 조정하는 속성입니다.

가로 위치	세로 위치
숫자	숫자
left	top
right	bottom
center	center

 

예제)

body {background-position:center center;}

[CSS3] background-size : 배경 이미지 크기

이것은 CSS3 속성이라, IE9이상, Chrome, Firefox등에서만 가능합니다,

말 그대로 배경 이미지의 크기를 조정하는 속성입니다.

예제)

body {background-size:100% 500px;}

* 100% – 너비
   500px - 높이

 

background로 한번에 정리하기

예제)

body {background:#eeeeee url(“./images/wincomi_bg.jpg”) no-repeat right bottom fixed}