css background 변경

css background 속성

CSS의 배경 속성은 요소(element)의 배경 효과를 정의하는데 사용됩니다. 예를들면 div 태그에 background-image 속성을 적용하면 글의 배경으로 이미지를 표시할 수 있습니다. 이러한 배경 속성에는 다음과 같은 것들이 있습니다.

• background-color : 배경색
• background-image : 배경 이미지
• background-repeat : 배경 반복
• background-attachment : 배경 부착
• background-position : 배경 위치

background-color 속성

background-color 속성은 요소의 배경색을 지정합니다. 웹페이지의 배경색은 다음과 같이 설정할 수 있습니다. 컬러 값은 지난번 '3가지 CSS color 속성 지정 방법'의 글에서 얘기했듯이 컬러이름이나 RGB, HEX 값을 넣으면 됩니다. 가령 "Blue", "#0000ff", "rgb(0,0,255)" 이런 식이죠.

body {
    background-color: lightblue;
}

background-image 속성

이 속성은 요소의 배경으로 사용할 이미지를 지정합니다. 이렇게 지정된 이미지는 그 요소의 크기만큼 나타나죠. 기본적으로 이미지는 전체 요소를 포함하도록 반복됩니다. 무슨 말이냐면 이미지가 요소의 크기보다 작다면 모자이크 처럼 반복되서 표시된다는 거죠.

body {
    background-image: url("paper.gif");
}

background-attachment 속성

특정한 자리에 배경 이미지를 고정해야 한다고 할때는 background-attachment 속성을 사용합니다. 이렇게 하면 마우스 스크롤을 해도 배경이 움직이지 않고 그 자리에 있어요.

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

background-position 속성

이 속성은 배경 위치를 지정합니다. 쓸 수 있는 속성 값에는 left, right, center, top, bottom과 같은 키워드를 넣거나 "x% y%" 형식의 백분율, "xpos, ypos" 형식의 픽셀값 그리고 초기값인 initial, 상속값인 inherit이 있습니다. 참고로 다음과 같이 배경과 관련된 여러 속성들을 축약해서 표시할수도 있습니다.

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

정리

css에서 요소의 배경색이나 이미지를 지정할 때 background-color나 background-image 속성을 사용합니다. 그리고 좀 더 디테일하게 표시 혹은 위치를 조정하려면 background-repeat, background-position나 background-attachment 속성을 사용하면 됩니다.

참고로 이 글은 'CSS 학습 목차'에 나오는 이전 글들에서 이어지는 글입니다.