css - background

속성	설명
background-color	기본값은 transparent, 즉 투명이며 색상명이나 색상 코드를 사용할 수 있습니다.
background-image	기본값은 none, 즉 없음이며 이미지의 위치를 상대 경로 또는 절대 경로를 사용하여 나타낼 수 있습니다.
background-repeat	배경 이미지가 주어진 영역에 꽉 차지 않는 경우 이미지를 반복할 방식을 결정합니다. 기본값은 repeat인데 배경 이미지를 가로와 세로 모든 방향으로 반복을 해줍니다. repeat-x는 가로 방향으로만 repeat-y는 세로 방향으로만 배경 이미지를 반복합니다. no-repeat는 반복을 원하지 않을 때 사용합니다.
background-position	배경 이미지가 주어진 영역에서 어디에 위치할지를 결정합니다. 이 속성은 background-repeat 속성을 no-repeat로 설정해놓고 사용하는 게 일반적인데요. 배경 이미지가 반복된다면 위치를 지정하는 게 큰 의미가 없어지기 때문입니다. 기본값은 배경 이미지를 좌측 상단에 위치시켜 주는 0% 0%이며 절대/상대 단위를 사용하여 좌측 상단으로 부터 얼마나 떨어져야하는지를 지정할 수 있습니다. 보통 top, bottom, left, right, center와 같은 방향 키워드가 많이 사용됩니다.
background-size	배경 이미지의 크기를 결정합니다. 기본값은 auto인데 배경 이미지의 실제 크기를 사용합니다. 절대/상대 단위를 사용해서 특정값을 지정해줄 수 있으며, 주어진 영역에 따라 이미지의 크기를 자동으로 조절해주는 키워드도 있습니다. cover 키워드는 배경 이미지가 짤리더라도 주어진 영역을 완전히 덮을 수 있도록 이미지를 크기를 맞춰줍니다. contain 키워드는 빈 공간이 생기더라도 배경 이미지가 주어진 영역에 안에 모두 들어올 수 있도록 이미지의 크기를 맞줘줍니다.
background-attachment	스크롤 시 배경 이미지가 주어진 영역과 함께 따라갈지 그대로 있을지를 결정합니다. scroll 키워드를 사용하면 배경 이미지가 주어진 영역과 함께 스크롤되고, fixed 키워드를 사용하면 배경 이미지가 주어진 영역이 스크롤되더라도 고정됩니다.

background

div {
  background: no-repeat center/80% url("../img/image.png");
}