CSS의 background 속성은 배경 색상, 배경 이미지, 반복 여부, 스크롤 시 고정 방식, 이미지 위치 등 배경과 관련된 모든 속성을 하나의 선언으로 동시에 지정할 수 있는 축약형(shorthand) 속성입니다. 개별 속성을 따로 작성할 필요 없이 코드를 간결하게 유지할 수 있어 실무에서 널리 활용됩니다.
예제
아래 코드를 실행하면 background 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다.
<html>
<head>
<style>
#demo {
background: lightblue url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg") no-repeat fixed top;
}
</style>
</head>
<body>
<div id="demo">
<h1>www.tutorialspoint.com</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at
their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated,
we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on
topics ranging from programming languages to web designing to academics and much more..</p>
</div>
</body>
</html>
background 속성에 사용된 값 살펴보기
예제에서 사용된 background 속성의 각 값은 아래와 같은 의미를 가집니다.
- lightblue : 요소의 배경색을 연한 파란색으로 지정합니다.
- url(...) : 배경 이미지로 사용할 파일의 경로를 지정합니다.
- no-repeat : 배경 이미지가 반복되지 않고 한 번만 표시되도록 설정합니다.
- fixed : 페이지를 스크롤하더라도 배경 이미지가 화면에 고정되어 움직이지 않도록 합니다.
- top : 배경 이미지를 요소 영역의 위쪽에 배치합니다.
참고: 개별 배경 속성
background 축약형 속성은 다음과 같은 개별 속성들을 한꺼번에 설정합니다.
- background-color : 배경 색상 지정
- background-image : 배경 이미지 지정
- background-repeat : 배경 이미지의 반복 방식 지정
- background-attachment : 스크롤 시 배경의 고정 여부 지정
- background-position : 배경 이미지의 위치 지정
축약형 속성을 사용하면 값을 나열하는 순서가 어느 정도 유연하지만, 일반적으로 색상 → 이미지 → 반복 → 고정 → 위치 순으로 작성하는 것이 가독성 면에서 권장됩니다.