Background

배경과 관련된 여러 스타일들을 한번에 지정

background CSS 속성은 배경과 관련된 다양한 단축 속성이다.

이를 통해 배경의 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정한다.

이번 포스팅에서는 background와 관련된 다양한 속성에 대해서 알아보도록 하겠다.

background-color

background-color 속성을 사용해 배경에 색상을 지정한다.

background-color는 font-size와 동일하게 px, em, rem등의 속성값 단위를 사용한다.

.box {
	width: 200px;
	height: 200px;
	background-color: #0066ff;
}

background-image

background-image 속성을 사용해 배경에 이미지를 지정한다.

.box {  
  /* url()함수를 사용해서 사용하고자 하는 이미지의 경로를 지정 */
  /* 1. 상대경로   */
  background-image: url("./assets/img-house-vertical.jpg");
  /* 2. 절대경로   */
  background-image: url("https://images.unsplash.com/photo-1640681371256-9463cb0dfe78?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80");
}

background-repeat

background-repeat 속성을 사용해 배경이미지의 반복 유무를 지정한다.

background-repeat의 기본 속성값은 repeat다.

.box {    
  background-image: url("./assets/img-house-vertical.jpg");
  /* repeat, no-repeat */
  background-repeat: no-repeat;
}

background-size

background-size 속성을 사용해 배경이미지의 크기를 지정한다.

background-size의 속성값은 contain, cover, custom등을 사용해 상황에 맞게 배경 이미지의 크기를 조정할 수 있다.

.box {    
  background-image: url("./assets/img-house-vertical.jpg");  
  background-repeat: no-repeat;
  /* contain, cover, custom */
  background-size: contain;
}

background-position

background-position 속성을 사용해 배경이미지의 위치를 지정한다.

.box {  
  /* (x, y)축을 이용해 위치를 지정 */
  background-position: center bottom;  
  background-position: left top;
  background-position: 100px 50%;
}

<img>태그와 background-image속성

HTML의 <img>태그와 CSS의 background-image속성은 비슷해보이지만 각각 상황, 용도에 맞게 사용해야 한다.

사용하고자 하는 이미지가 크기가 정해진 틀에 넣는 형태가 아닌 서비스를 이용하는 사람들마다 다양한 크기로 업로드할 때는 CSS의 background-image속성을 사용한다.

즉 다양한 크기의 이미지에 동일한 형식을 적용하기 위해서는 CSS의 background-image속성을 사용하는 것이 좋다.

참고 자료

background - CSS: Cascading Style Sheets | MDN
김버그의 CSS는 재밌다 - 기초부터 실무 레벨까지