CSS background

사실 백그라운드와 관련된 속성도 상당히 많고... 거기서 추가할 수 있는 값 또한 상당히 많다.. 그중에서 내가 많이 사용하는 몇가지 속성과 핵심 값들을 기준으로 정리하고자 한다!

1. background-color

요소의 배경색을 정하는 속성

.bgContiner{
  width: 400px;
  height: 400px;
  border: 10px solid pink;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bgBox{
  width: 300px;
  height: 300px;
  border: 1px solid grey;
  background-color: #b197fc;
}

2. background-image

요소의 배경에 표시할 배경 이미지를 지정. url()을 통해 이미지를 나타냄.

.bgContiner{
  width: 400px;
  height: 400px;
  border: 10px solid pink;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bgBox{
  width: 300px;
  height: 300px;
  border: 1px solid grey;
  background-color: #b197fc;
  background-image: url("/image.jpg");
}

3. background-size

배경이미지의 크기를 동적으로 지정할 수 있음. 사용 가능한 공간에 맞게 원래 크기로 유지하거나 늘리거나 제한할 수 있다.

1) contain: 이미지를 자르거나 늘리지 않고 컨테이너 내에서 이미지를 최대한 크게 확장, 컨테이너가 이미지보다 크면 background-repeat을 no repeqt으로 지정하지 않는다면 이미지 타일링 현상이 일어남

.bgBox{
  width: 100px;
  height: 300px;
  border: 1px solid grey;
  background-color: #b197fc;
  background-image: url("/image.jpg");
  background-size: contain;
}

2) cover: 이미지의 비율을 유지하면서 컨테이너를 채울 수 있는 가장 작은 크기(즉, 이미지의 높이와 너비가 컨테이너를 완전히 덮음 )로 조정하여 빈 공간을 남기지 않음. 배경의 비율이 요소와 다른 경우 이미지가 세로 또는 가로로 잘림

.bgBox{
  width: 100px;
  height: 300px;
  border: 1px solid grey;
  background-color: #b197fc;
  background-image: url("/image.jpg");
  background-size: cover;
}

4. background-attachment

내용이 스크롤될때 요소의 배경동작을 설명

.attachment{
 width: 400px;
 height: 400px;
  background-attachment: fixed;
 background-image: url('/image.jpg');
 background-size: 300px;
}

이렇게 스크롤을 내리면 attachment div는 우측 상단에 고정된것같은 모습을 보여줌!

5. background-repeat

배경이미지를 얼마나 반복할지 설정

1) no-repeat

.bgBox{
  width: 100px;
  height: 300px;
  border: 1px solid grey;
 background: #b197fc url("/image.jpg");
  background-size: contain;
  background-repeat: no-repeat;
}

2) repeat-x

.bgBox{
  width: 300px;
  height: 100px;
  border: 1px solid grey;
 background: #b197fc url("/image.jpg");
  background-size: contain;
  background-repeat: repeat-x;
}

3) repeat-y;

.bgBox{
  width: 100px;
  height: 300px;
  border: 1px solid grey;
  background: #b197fc url("/image.jpg");
  background-size: contain;
  background-repeat: repeat-y;
}

6. background

배경과 관련된 속성들을 모아서 작성하는 속기법!

.bgBox{
  width: 100px;
  height: 300px;
  border: 1px solid grey;
  background: #b197fc url("/image.jpg") no-repeat;
  background-size: contain;
}

참고자료
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size