Archive/HTML-CSS-JS

CSS background

배경색 지정 : background-color : #FFFFFF

배경 이미지 : background-image : url("dot.gif")

배경 이미지 정렬 : background-repeat : 옵션

옵션 1) repeat : 배경 이미지를 바둑판식 배열
2) repeat-x : 가로방향으로 반복 정렬
3) repeat-y : 세로방향으로 반복 정렬
4) no-repeat : 반복하지 않고 한번만 표기

배경 이미지 위치 : background-position : 옵션

옵션 1) 실수값+단위
가로, 세로의 위치를 순서대로 공백으로 구별하여 숫자값으로 지정.
값을 한개만 지정한 경우는 가로 방향의 위치를 지정한 것이고,
세로 방향은 50%로 설정됩니다. 값은 음수로도 지정할 수 있습니다.
2) %
가로, 세로의 위치를 순서대로 공백으로 구별하여 비율로 지정.
값을 한개만 지정한 경우는 가로 방향의 위치를 지정한 것이고,
세로 방향은 50%로 설정됩니다.

* 옵션을 두개 지정하는 경우,
옵션, 1)과 2)의 경우 서로 혼합하여 사용(조합)가능 합니다.
단, 옵션 3)과는 혼합 사용이 불가능합니다.
3) left, center, right, top, center, bottom
제공되는 키워드로, 공백으로 구별하여 키워드를 지정하며
가로 세로의 지정 순서는 상광없습니다.
값을 한개만 지정한 경우는 나머지는 center로 지정됩니다.

배경 이미지 고정 : background-attachment : 옵션

옵션 1) fixed : 배경 이미지의 위치를 고정시킵니다.
2) scroll : 배경 이미지를 다른 내용과 함께 스크롤 합니다.


이상, 사용예는 다음과 같습니다

body{
background-color : #FFFFFF;
background-image : url("dog.gif");
background-repeat : no-repeat;
background-position : right bottom;
background-attachment : fixed;
}

마지막으로 한꺼번에 지정하는 예입니다.

body { background: #FFFFFF url(dot.gif) no-repeat right bottom fixed; }

반응형

'Archive > HTML-CSS-JS' 카테고리의 다른 글

When open link on IE, redirect Microsoft Edge  (0) 2021.02.05
JS] 스크립트를 이용한 페이지 자동 전환  (0) 2007.10.29
HTML] html 형 홈페이지 ver1 ~ 4  (0) 2007.03.10
JS] for 윈도우 리사이즈  (0) 2006.12.07
CSS background  (0) 2005.02.16
JS] TOP으로 가기  (0) 2005.02.07