윈컴이의 컴퓨터 이야기

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

프로그래밍/웹 개발

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

윈컴이 2012.01.03 22:24

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}

신고