[CSS] Background

hyesom·2021년 12월 6일
0

CSS

목록 보기
11/18
post-thumbnail

background 속성값

① background-color

배경색 지정
(1) hex (#ffaaaa)
(2) rgb (255, 185, 189)
(3) rgba (255, 185, 189, 0.5)
(4) 색이름 (pink)

② background-image

배경에 이미지를 삽입하기위해 주소 지정
url() 반드시 사용

.img_box {
  background-image: url(이미지경로);
}

③ background-repeat

배경이미지 패턴지정
/* repeat | repeat-x(가로반복) | repeat-y(세로반복) | no-repeat(반복x) /

④ background-size

배경이미지 크기지정
/* contain | cover | custom /
(1) contain : 요소안에 이미지의 모든면을 들어가게끔 사이즈 적용
(2) cover : 요소안에 빈공간을 남기지 않고 꽉 차도록 사이즈 적용
(3) custom

⑤ background-position

배경이미지 위치 지정(이미지를 어떻게 위치 시킬 것인가?)
x축, y축 생각

background-position: center center;
/* x축의 center, y축의 center */
profile
✨프론트엔드 개발자가 되기 위한 독학러✨

0개의 댓글