CSS background 속성이란?
CSS의 background 속성은 배경과 관련된 여러 개별 속성을 하나로 묶어 한 번에 지정할 수 있는 단축(shorthand) 속성입니다. 이 속성 하나만으로 배경 이미지, 이미지 위치(position), 반복 방식(repeat), 스크롤 시 고정 여부(attachment), 배경 색상까지 모두 설정할 수 있어 코드를 간결하게 유지하는 데 매우 유용합니다.
background 속성에 포함되는 개별 속성
- background-color : 요소의 배경 색상을 지정합니다.
- background-image : 배경으로 사용할 이미지를 지정합니다.
- background-repeat : 배경 이미지의 반복 방식을 지정합니다(repeat, no-repeat, repeat-x, repeat-y).
- background-attachment : 페이지를 스크롤할 때 배경 이미지를 고정(fixed)할지, 함께 스크롤(scroll)할지 결정합니다.
- background-position : 배경 이미지의 시작 위치를 지정합니다.
사용 예제
다음 예제는 background 단축 속성을 사용하여 문단에 고정되고 반복되는 배경 이미지를 적용한 코드입니다.
<html> <head> </head> <body> <p style = "background:url(/images/pattern1.gif) repeat fixed;"> This paragraph has fixed repeated background image. </p> </body> </html>
위 코드에서 url(/images/pattern1.gif)는 배경 이미지 파일의 경로를 의미하고, repeat는 이미지가 영역 전체를 채울 때까지 반복되도록 설정하며, fixed는 페이지를 스크롤하더라도 배경 이미지가 화면에 고정되어 보이도록 합니다.
사용 시 주의 사항
단축 속성에서는 각 값의 작성 순서가 엄격하게 강제되지는 않지만, 값이 많아질 경우 의미가 혼동될 수 있으므로 필요한 값만 명확하게 나열하는 것이 좋습니다. 또한 단축 속성을 사용하면 명시하지 않은 개별 속성은 기본값으로 초기화되기 때문에, 앞서 설정한 배경 스타일이 덮어써지지 않도록 주의해야 합니다.