[css] background 속성 총정리

오늘은 웹사이트를 꾸며줄 때 많이 사용하게 되는 background 속성에 대해 알아보자.

 

사이트 내에서 배경을 넣을 때는 거의 대부분 이 속성을 사용하게 된다.

설정할 수 있는 속성 값이 여러 가지라 내가 원하는 대로 잘 되지 않고 어떻게 해야 하는지 헷갈릴 때가 은근히 많다.

 

정리도 할 겸 헷갈릴 때 볼 겸 포스팅 해 본다! gogo!

 

 

 

 

background-color

 

 

단순히 색상만을 채워 넣을 때 쓰는 속성.

다음으로 나올 background-image와 같이 사용하게 되면 image가 우선적으로 보이고 그 아래에 color가 적용된다.

.bg{
    width : 100%;
    height : 100%;
    background-color : #fff;
}

 

 

 

 

 

background-image

 

 

특정 이미지를 배경으로 넣을 때 쓰는 속성.

url("경로"), url("경로") 이런 식으로 여러 개의 이미지를 사용할 수도 있다.

맨 처음으로 지정한 이미지가 가장 먼저 보이고 그 이미지 뒤에 다음 이미지가 겹치는 형태로 지정된다. 

.bg{
    width : 100%;
    height : 100%;
    background-image : url("happycode.jpg")
}

 

 

 

 

background-size

 

 

배경 이미지의 크기를 지정하는 속성.

속성 값은 아래와 같다.

.bg{
    background-size : auto;
    // 이미지의 원본 크기를 유지함

    background-size : contain;
    // 이미지를 가로, 세로 중 먼저 채워지는 쪽에 맞춰 채움

    background-size : cover;
    // 이미지의 비율을 유지한 채로 화면에 꽉차게 설정

    background-size : 50%;
    // 이미지의 너비 설정(여러 단위 사용 가능, 높이는 auto)

    background-size : 50px 100px;
    // 이미지의 너비와 높이 설정

    background-size : auto, auto;
    // 다중 배경 사용 시 쉼표로 구분
}

 

 

 

 

background-position

 

 

배경 이미지의 위치를 지정하는 속성.

.bg{
    background-position : top;
    background-position : center;
    // top, bottom, right, left, center를 사용하여 위치 지정

    background-position : 50%;
    // 가로, 세로 퍼센트 값으로 지정(여러 단위 사용 가능, 위처럼 쓴다면 세로는 auto 값을 가짐)
}

 

 

 

 

background-repeat

 

 

배경 이미지가 영역보다 작다면 이미지를 반복하여 영역을 채울 것인지 지정하는 속성.

.bg{
    background-repeat : repeat;
    // 반복하여 채움
    
    background-repeat : repeat-x;
    // 가로만 반복하여 채움

    background-repeat : repeat-y;
    //세로만 반복하여 채움
    
    background-repeat : space;
    // 반복할 수 있는 만큼 반복하여 채우고, 공간이 남으면 이미지 사이에 여백을 줌
    
    background-repeat : round;
    // 반복할 수 있는 만큼 반복하여 채우고, 공간이 남으면 이미지를 확대해서 채움
}

 

 

 

 

background-attachment

 

 

배경 이미지의 스크롤 여부를 지정하는 속성.

 

.bg{
    background-attachment : scroll;
    // 이미지를 영역 자체에 고정하여 함께 스크롤 되지 않음
    
    background-attachment : fixed;
    // 이미지를 뷰포트에 고정. 배경은 스크롤 되지 않음
    
    background-attachment : local;
    // 이미지를 콘텐츠에 고정. 콘텐츠와 함께 스크롤 됨
}

 

 

 

 

background-clip

 

 

배경 이미지가 영역의 테두리(border), 안쪽 여백(padding), 콘텐츠 상자(div) 중 어디까지 차지할지 지정하는 속성.

.bg{
    background-clip : border-box;
    // 테두리 경계까지 차지
    
    background-clip : padding-box;
    // 안쪽 여백까지 차지
    
    background-clip : content-box;
    // 콘텐츠 상자까지 차지
    
    background-clip : text;
    // 이미지가 텍스트에만 보이게 설정(클리핑 마스크와 비슷함)
}

 

 

 

 

background 한 줄로 지정하기

 

 

background 속성을 사용하여 한 줄로 지정할 수 있다.

가장 많이 사용하는 형태로 예시를 만들어 보았다.

.bg{
    background-image : url("happycode.jpg");
    background-position : center;
    background-size : cover;
    background-repeat : no-repeat;
}

각각의 속성을 background을 사용하여 한 줄로 지정하게 되면 아래와 같다.

.bg{
    background : center/cover no-repeat url("happycode.jpg");
}

position과 size는 일부 값의 단위를 공유하므로 꼭 슬래시를 넣어서 구분해주어야 한다.