[CSS] Backgrounds 설정하기(color, image, repeat, attachment, position)

Backgrunds(요소의 배경)를 설정하는 CSS 속성을 알아보겠습니다.

 

• background-color
• background-image
• background-repeat
• background-position
• background-attachment

1) background-color : 요소의 배경색을 설정할때 사용하는 속성

div {
    background-color : red;
}

 

2) background-image : 요소의 배경 이미지를 설정할때 사용하는 속성

div{
    background-image : url(test.jpg);
}

+

background-image를 사용하여 배경에 이미지를 넣으면 기본으로 x축 y축으로 반복된다.

이때 반복 방향 설정하는 속성이 background-repeat이다.

3) background-repeat 

/* 반복 없애기(image를 요소 전체가 아니라 한번만 노출되도록 설정) */
div{
    background-image : url(test.jpg);
    background-repeat : no-repeat;
}

/* x축으로 반복 */
div{
    background-image : url(test.jpg);
    background-repeat : repeat-x;
}

/* y축으로 반복 */
div{
    background-image : url(test.jpg);
    background-repeat : repeat-y;
}

+

background-image의 위치를 설정할때는 background-position 속성을 이용한다.

이미지의 위치를 설정하는 것이기 때문에 backgorund-repeat가 no-repeat일때 사용하는 것이 적절

4) background-position

/* image를 오른쪽에 위치하도록 설정 */
div{
    background-image : url(test.jpg);
    background-repeat : no-repeat;
    backgorund-position : right;
}

 

+

background-image의 scroll 가능 여부를 설정할때는 background-attachment 속성을 이용한다.

fixed로 설정하면 화면이 스크롤 되도 이미지의 위치는 고정(전체 이미지가 계속 보인다.)

5) background-attachment

/* 이미지를 화면 상단에 고정(fixed) */
div{
    background-image : url(test.jpg);
    background-repeat : no-repeat;
    backgorund-position : right top;
    background-attachment : fixed;
}

/* 이미지를 화면에 연동, 화면 움직임에 따라 이미지가 보이는 부분이 달라진다.(scroll) */
div{
    background-image : url(test.jpg);
    background-repeat : no-repeat;
    backgorund-position : right top;
    background-attachment : scroll;
}

 

참고 - "Learn CSS" W3School (https://www.w3schools.com)