배경이미지 설정

스타일시트 배경이미지 설정

 

엘리먼트의 배경

엘리먼트의 배경에 색상을 부여하거나 이미지를 표시하고 싶을 때 background 효과를 사용한다. 이 효과를 이용하면 배경에 사용된 이미지의 위치를 지정하거나, 반복 할 수 있다.

 

배경색

background-color:색상값

background-color 속성은 요소의 배경색을 설정하는 속성이다.

 

Hex	16진수로 색상 값을 표현, #ff0000(레드), #00ff00(그린), #0000ff(블루)
RGB	레드, 그린, 블루의 값을 조합하여 색상 값을 표현, RGB(255,0.0), RBG(0,255,0), RGB(0,0,255)
고유색	red, green, blue등  컬러코드보기

 

 

배경이미지

background-image('이미지 URL')

background-image 속성은 요소의 배경 이미지를 설정하는 속성이다.

 

 

배경이미지 반복설정

background-repeat:반복방식

 

repeat	배경 이미지를 바둑판식 배열로 정렬한다.
repeat-x	배경 이미지를 가로방향으로 반복해서 정렬한다.
repeat-y	배경 이미지를 세로방향으로 반복해서 정렬한다.
no-repeat	배경 이미지를 반복되지 않고 한 번만 표시합니다.

 

배경이미지 위치

background-position : 위치값

 

left top  left center  left bottom  right top  right center  right bottom  center top  center center  center  bottom	배경 위치를 지정
x% y%	x%는 수평위치를 y%는 수직 위치를 의미하고, 이미지의 상대적인 위치를 지정한다.
xpos ypos	이미지의 절대적인 위치를 지정한다.

 

배경이미지 고정

background-attachment :속성값

 

fixed	배경 이미지의 위치를 고정시킨다.
scroll	배경 이미지를 다른 내용과 함께 스크롤하도록 한다.

 

 

단축속성

body {background:#00ff00 url('img.gif') no-repeat right top;}