background

background

요소의 배경을 지정하는 속성입니다.

// 속기형
section {
    background: #000 url("../images/back-img.jpg") no-repeat 10px center;
}

background-color

배경의 색상을 지정합니다. 값은 color 속성의 포멧을 사용합니다.

section {
    background-color: red;
}
section {
    background-color: #000;
}
section {
    background-color: rgba(255,99,71,);
}
section {
    background-color: rgba(255,0,0,0.3);
}

background-image

배경 이미지를 설정하며, 경로를 지정하는 방식으로 사용합니다.
background-image의 크기는 요소에 맞춰 늘어나거나 줄어들지 않고 그대로 표시되며,

요소가 이미지보다 크다면 이미지는 반복되어 표시되게 됩니다.

section {
    background-image: url("../images/back-img.jpg");

}

background-repeat

배경 이미지의 반복 유무를 지정합니다.

• repeat : 배경 이미지를 X축 및 Y축으로 반복합니다.
• repeat-x : 배경 이미지를 x 축으로 반복합니다.
• repeat-y : 배경 이미지를 y축으로 반복합니다.
• no-repeat : 이미지를 반복하지 않습니다.

section {
    background-repeat: no-repeat;
}

 

background-position

배경 이미지의 위치값을 지정합니다. (X축 및 Y축 두개의 속성 값으로 위치 설정)

• top, left, center, bottom, right
• px (left , top 만 사용 가능)

section {
    background-position: center;
}