CSS

background

funfunweb 2023. 9. 15. 11:04

배경의 색상, 이미지, 반복여부, 위치, 고정 여부를 각각 따로 기술하거나 한번에 표기할 수 있다.

/*한번에*/
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