background는 배경 이미지에 관련된 여러 속성들을 하나로 줄여서 사용할 수 있는 속성
티스토리 뷰
1. 개념
background - 하나의 속성으로 배경 이미지 설정
2. 태그
background
html5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
<style>
div
{
margin-top
:
20px
;
width
:
200px
;
height
:
200px
;
border
:
1px solid #000
;
display
:
inline-block
;
padding
:
30px
;
}
</style>
</head>
<body>
1
<div style
= '
background
:
url(monitor.png) no-repeat left center padding-box
'
>
</div>
2
<div style
= '
background
:
url(monitor.png) repeat-x right center padding-box
'
>
</div>
</body>
</html>
|
결과 화면
코드 설명
1
background
:
url(monitor.png) no-repeat left center padding-box
;
background 배경 이미지에 사용되는 속성명이 없어도 해당하는 설정값을 알고 있으면 background로 사용이 가능합니다.
2
background
:
url(monitor.png) repeat-x right center padding-box
;
2번째 예제에서도 마찬가지로 속성에 대한 값을 입력해서 background에 넣었을 때 거기에 맞게 배경 이미지가 나오는 것을 확인하실 수 있습니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] radial-gradient - 원형 그라데이션 (0) | 2021.04.20 |
|---|---|
| [css3] linear-gradient - 선형 그라데이션 (0) | 2021.04.19 |
| [css3] background-origin - 배경 이미지 배치 기준 조절 (0) | 2021.04.16 |
| [css3] background-position - 배경 이미지 위치 조절 (0) | 2021.04.15 |
| [css3] background-size - 배경 이미지 크기 조절 (0) | 2021.04.15 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday