배경과 관련된 여러 스타일들을 한번에 지정
background
CSS 속성은 배경과 관련된 다양한 단축 속성이다.
이를 통해 배경의 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정한다.
이번 포스팅에서는 background와 관련된 다양한 속성에 대해서 알아보도록 하겠다.
background-color
속성을 사용해 배경에 색상을 지정한다.
background-color
는 font-size와 동일하게 px, em, rem등의 속성값 단위를 사용한다.
.box {
width: 200px;
height: 200px;
background-color: #0066ff;
}
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
의 기본 속성값은 repeat
다.
.box {
background-image: url("./assets/img-house-vertical.jpg");
/* repeat, no-repeat */
background-repeat: no-repeat;
}
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
속성을 사용해 배경이미지의 위치를 지정한다.
.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는 재밌다 - 기초부터 실무 레벨까지