css background 속성 / 단축 속성 / 주의점

css 상에서 백그라운드로 이미지를 넣을 때 주로 꽉찬 배경 이미지를 넣고자 할때 쓰인다.
자주쓰지만 또 자주 헷갈리는 속성중에 하나.
속성명이 길기 때문에 단축 속성으로 적어 주는게 좋다.
특히 단축 속성엔 유의해야할 몇가지를 잘 알아두면 좋을 듯 하다!

1. css background 속성 종류

background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment

2. Css 단축 속성

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment;

* 속성을 적는 순서는 상관 없음

3. 순서를 지켜야 하는 단축 속성 (position/size)

순서를 지켜야 하는 속성간에는 슬래쉬로(/) 구분 지어 주어야 한다  

background-position: 50px 150px;
background-size: 300px 100px;
-> background: 50px 100px/300px 100px;

활용 예제

#example2 {
  height:300px;
  border: 2px solid black;
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 300px 100px;
  background-position: 50px 100px;
}

#example2 {
  height:300px;
  border: 2px solid black;
  background: url(mountain.jpg) no-repeat 50px 100px/300px 100px;
}