Background

background 속성으로 배경을 넣을 수 있다.

background-color

• 박스 안에 배경으로 컬러를 넣을 수 있다.
  • 영어 단어: black로 넣을 수 있으나, 어느 정도 한계가 있다.
  • 6글자: #ffffff 이와 같이 6글자로 표현할 수 있는데, 글자가 모두 똑같아서 3단어로 줄여쓰기도 한다.
  • rgba: 빨강,초롱,파랑으로 색깔을 표시해줘서 숫자로 표시하는데 거기에 더불어 투명도까지 쓸 수 있다.
  • hsl: 색상, 채도, 명도로 색상로 배경색을 표현

p { background-color: #eee; }

background-repeat

• 배경에 이미지를 넣을 경우 반복할지 안 할지 정할 수 있다.
  • repeat: 가로, 세로 반복
  • repeat-x : 가로 반복
  • repeat-y : 세로 반복
  • repeat-y : 세로 반복
  • no-repeat: 반복하지 않을 경우 넣어야하는 값

p { background-repeat: repeat;}
p { background-repeat: repeat-x;}
p { background-repeat: repeat-y;}
p { background-repeat: no-repeat;}

background-size

• 배경 이미지를 넣을 경우 높이와 넓이를 지정할 수 있다.
  • contain: 세로 길이를 최대 늘리는 대신 가로세로 비율 유지
  • cover: 가로 길이를 최대 늘리는 대신 가로세로 비율 유지
  • auto: 이미지 크기를 유지
  • 32px 24px: 이렇게 숫자로도 크기를 줄 수 있다.

p { background-size: contain;}
p { background-size: cover;}
p { background-size: auto;}
p { background-size: 32px 24px;}

background-image

• 박스에 이미지를 넣을 수 있다.

p { background-image: url("../images/img.png");}

background-position