CSS background 꽉차게 넣는 방법

이번 포스트에서는 CSS background 프로퍼티를 다룹니다. 

<section id = 'overview'></section>

CSS background

#overview{
    background: url("css.jpg");
    width: 100%;
    height: 528px;
    padding: 10px;
    margin-top: 43px;
    position: relative;
}

background는 background-color, background-image, origin, size, repeat 등 모든 background와 관련된 프로퍼티를 설정할 수 있는 프로퍼티입니다. background에 url로 background 이미지를 설정했다면, 아래 사진처럼 여러 번 반복됩니다. 이때의 background의 역할은 background-image인 것이죠. 참고로 아래 CSS 이미지는 가로 세로 400px 정도 되는 사진입니다.

css background-image

background-size

background-size를 지정하면 폭(width)을 지정할 수 있습니다. 위의 사진은 400px이었는데, 폭을 100px로 줄이니 아래 사진처럼 더욱 작아진 사진이 여러 번 반복되는 걸 확인할 수 있습니다. 300px 100px 이렇게 작성하면 가로 300px 세로 100px로 이미지를 변형시킵니다. 

px단위로 이미지 크기를 설정하는 것이 어렵다면 %로 설정할 수도 있습니다. 만약에 이미지 비율을 유지하면서 크기를 변경하고 싶을 경우에는 background-size: auto 100% 이런 방식으로 auto를 사용하면 됩니다. 

background-size: 100px;

background-size

background-size: cover, contain

이미지를 컨테이너 너비에 맞추고 싶은 경우 cover를 사용하면 됩니다. 이미지가 컨테이너를 채우게 설정하여 여백이 없도록 설정해줍니다. 

background-size: cover;

background-size: cover

background-size: contain은 전체 이미지가 컨테이너에 나오도록 설정합니다. contain은 이미지가 컨테이너 전체를 채우도록 설정하진 않습니다. 컨테이너 사이즈가 이미지 사이즈와 같다면 전체를 채우겠지만, 보통은 다른 경우가 많아 컨테이너 전체를 채우진 못합니다. cover는 이미지가 컨테이너를 채우도록 설정해주지만, contain은 컨테이너 안에 전체 이미지가 나오도록 설정해준다는 차이점이 있습니다. 그래서 contain을 사용했을 땐 여백이 있습니다. 

contain

background-repeat

이렇게 반복되는 것이 싫으면 no-repeat로 사진이 반복되지 않도록 설정할 수 있습니다. background-repeat 프로퍼티 설정으로 repeat-x, repeat-y가 있는데, 자주 사용되는 속성은 아닙니다. repeat-x를 사용하면 가로줄로 사진이 반복되고, repeat-y를 사용하면 세로줄로 사진이 반복됩니다. 

background-repeat: no-repeat;

no-repeat