CSS의 background 단축 속성(shorthand property)은 요소의 배경을 한 번에 정의할 수 있도록 도와주는 강력한 속성입니다. 이 단축 속성 하나만 사용해도 background-color(배경색), background-image(배경 이미지), background-repeat(반복 여부), background-position(위치), background-clip(클리핑 범위), background-size(크기), background-origin(기준점), background-attachment(고정 방식) 등 여러 개별 배경 속성을 간결하게 설정할 수 있습니다.
구문(Syntax)
CSS background 단축 속성의 기본 문법은 다음과 같습니다.
Selector {
background: /*값*/
}
단축 속성에서는 값의 순서가 대체로 자유롭지만, 위치(position)와 크기(size)를 함께 지정할 때는 center/cover처럼 슬래시(/)로 구분해야 한다는 점에 유의하세요.
예제 1: body와 div에 배경 적용하기
다음 예제는 background 단축 속성을 활용해 배경색, 배경 이미지, 반복 여부, 이미지 위치를 한 줄로 지정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: linen url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat 40% 20%;
}
div {
padding: 100px;
background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/green/images/logo.png") no-repeat left;
}
</style>
</head>
<body>
<h2>Learn</h2>
<ul>
<li>Java</li>
<li>C#</li>
<li>Android</li>
<li>iOS</li>
<li>C++</li>
<li>C</li>
</ul>
<div></div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 눈여겨볼 점은 rgba() 함수를 사용해 반투명한 배경색 위에 로고 이미지를 겹쳐 표시했다는 것입니다. 이렇게 하면 색상과 이미지를 동시에 조합한 세련된 배경 효과를 만들 수 있습니다.
예제 2: 테이블 셀에 배경 적용하기
아래 예제는 테이블(table)과 셀(td)에 각각 다른 배경을 지정하는 방법을 보여줍니다. 태그 선택자와 ID 선택자(#demo)를 함께 사용해 요소별로 서로 다른 배경 스타일을 적용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, tr, td {
margin: auto;
border: 2px solid red;
padding: 40px;
}
td {
background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/images/blockchain.png") no-repeat;
}
#demo {
background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/images/reactjs.png") no-repeat;
}
table {
background: ivory url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat center;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<table>
<tr><td></td></tr>
<tr><td id="demo"></td></tr>
</table>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
마무리
background 단축 속성을 잘 활용하면 여러 줄에 걸쳐 작성해야 할 배경 스타일을 한 줄로 압축할 수 있어 코드가 훨씬 깔끔해집니다. 실무에서는 배경색과 배경 이미지를 함께 지정해 두는 것이 좋습니다. 이미지가 로딩되지 않거나 투명한 PNG인 경우에도 배경색이 대신 표시되어 디자인이 깨지지 않기 때문입니다.