728x90
background
하나의 영역에 백그라운드 이미지를 중복해서 사용할 수 있도록 기능이 추가 확장되었다. 속성의 값을 ',' 로 나열하여 백 그라운드 이미지 형태를 반복해서 표현 가능.
background: url(이미지) 속성, url(이미지) 속성, ... ; |
[예제] 3개의 이미지를 서로 다른 속성으로 하나의 영역에 지정해 보자.
<!doctype html>
<html>
<head>
<style>
#back{
border:1px solid #ccc;
width:500px; height:200px;
background:
url(./img/back1.png) no-repeat left top,
url(./img/back2.png) repeat-x,
url(./img/back3.png) repeat-x left 40px
}
</style>
</head>
<body>
<div id="back"/>
</body>
</html>
[실행결과]
728x90
'BOOK > HTML5' 카테고리의 다른 글
패스 랜더링 (0) | 2021.08.13 |
---|---|
gradient (0) | 2021.08.11 |
border-radius (0) | 2021.08.09 |
box-shadow (0) | 2021.08.08 |
word-wrap (0) | 2021.08.07 |
댓글