배경의 색상, 이미지, 반복여부, 위치, 고정 여부를 각각 따로 기술하거나 한번에 표기할 수 있다.
/*한번에*/
background:color image repeat position attachment;
/*하나씩*/
background-color:값;
background-image:url(경로);
background-repeat:[repeat],[no-repeat],[repeat-x],[repeat-y]
background-position:left top;/*기본값 = 0 0*/
background-attachment:[scroll][fixed]
background-color(배경색)
색상명, hex값, rgb값, hsl 값, rgba값, hsla 값
transparent - 투명(기본값)
background-image(배경이미지)
url(경로) 이미지 경로 및 파일명 기술
none - 배경이미지 없음(기본값)
background-repeat(배경이미지 반복 여부)
repeat - 기본값 (가로,세로 반복)
배경이미지는 자식의 요소 크기만큼만 나온다. 내용물이 없을 경우 배경이 보이지 않을 수 있다.
이럴 경우 요소에 height 를 주어서 배경의 이미지가 나오게 할 수 있다.
배경이미지 고정된 사이트
http://www.gongju.go.kr/tour/index.do
'CSS' 카테고리의 다른 글
xeicon 넣기 (0) | 2023.10.16 |
---|---|
input type search - x 모양 없애기 (0) | 2023.10.16 |
opacity,rgba 차이점 (0) | 2023.09.15 |
display (0) | 2023.09.15 |
글자 색상 - color (0) | 2023.09.14 |