[CSS] background

Day37. 230621

색상과 배경을 위한 스타일

배경 색과 배경이미지

background-color 속성 - 배경 색 지정하기

background-color: <색상>

 

background-image 속성 - 웹 요소에 배경 이미지 넣기

background-image: url(파일 경로)

body{background-imange: url("a.jpg");}
#area{background-imange: url("a2.jpg");}

 

background-repeat 속성 - 배경 이미지 반복 방법 지정

background-repeat : repeat | repeat-x | repeat-y | no-repeat

속성 값	설명
repeat	브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복
repeat-x	브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복
repeat-y	브라우저 창 너비와 같아질 때까지 배경 이미지를 세로로 반복
no-repeat	배경 이미지를 한번만 표시하고 반복하지 않음.

 

background-size 속성 - 배경 이미지 반복 방법 지정

background-size : auto | contaion | cover | <크기 값> | <백분율>

 

background 속성 하나로 배경 이미지 제어

background:url('images/bg3.jpg') no-repeat fixed right bottpm;