CSS의 background 속성은 색상, 이미지, 반복 여부, 위치 등 배경과 관련된 모든 속성을 하나의 선언에서 한꺼번에 설정할 수 있는 축약형(shorthand) 속성입니다.
background 속성으로 설정할 수 있는 값
background 축약형 속성을 사용하면 다음과 같은 개별 속성들을 한 번에 지정할 수 있습니다.
- background-color : 요소의 배경색 지정
- background-image : 배경에 사용할 이미지 지정
- background-repeat : 배경 이미지의 반복 여부 설정
- background-attachment : 화면 스크롤 시 배경 고정 여부 결정
- background-position : 배경 이미지의 위치 지정
각 값을 공백으로 구분하여 나열하면 되며, 순서는 크게 중요하지 않습니다. 다만 일부 브라우저에서는 position과 attachment 값의 해석 순서가 있으므로 position/attachment 형태로 작성하는 것이 안전합니다.
예제
아래 코드는 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>코드 설명
위 예제에서 #demo 요소에는 다음과 같은 배경 스타일이 적용됩니다.
- lightblue : 연한 파란색 배경색을 지정합니다.
- url(...) : 지정한 이미지 파일을 배경 이미지로 사용합니다.
- no-repeat : 배경 이미지가 반복되지 않고 한 번만 표시됩니다.
- fixed : 페이지를 스크롤해도 배경 이미지가 화면에 고정됩니다.
- top : 배경 이미지를 요소의 상단에 배치합니다.
이처럼 background 축약형 속성을 활용하면 여러 줄의 개별 선언을 하나로 줄여 코드를 간결하게 유지할 수 있습니다.