background-image는 배경 이미지를 넣을 때 사용되는 속성으로 jpg , gif , png와 같이 웹에서 사용 가능한 파일어야 함
티스토리 뷰
1. 개념
background-image - 배경 이미지 삽입
2. 태그
background-image
html5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!
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
;
color
:
red
;
}
</style>
</head>
<body>
1
<div style
= '
background-image
:
url(monitor.png)
'
>
키보드와 하루
</div>
</body>
</html>
|
결과 화면
코드 설명
1
background-image
:
url(monitor.png)
;
monitor라는 이미지를 배경 이미지로 사용하겠다고 했습니다.
현재 monitor.png의 사이즈는 100*89 사이즈로 div에서 지정한 200*200 보다는 작은 사이즈 입니다. 이러한 경우에는 특별한 설정이 따로 없을 경우에는 자동으로 반복해서 표시를 해주고 있습니다.
그리고 이미지를 여러개를 사용하고자 할 경우엔느 첫 번째 이미지 부터 순서대로 표시를 해주시면 됩니다.
현재 monitor.png의 사이즈는 100*89 사이즈로 div에서 지정한 200*200 보다는 작은 사이즈 입니다. 이러한 경우에는 특별한 설정이 따로 없을 경우에는 자동으로 반복해서 표시를 해주고 있습니다.
그리고 이미지를 여러개를 사용하고자 할 경우엔느 첫 번째 이미지 부터 순서대로 표시를 해주시면 됩니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] background-size - 배경 이미지 크기 조절 (0) | 2021.04.15 |
|---|---|
| [css3] background-repeat - 배경 이미지 반복 방법 (0) | 2021.04.14 |
| [css3] background-clip - 배경색 적용 범위 (0) | 2021.04.13 |
| [css3] background-color - 배경 색 지정 (0) | 2021.04.13 |
| [css3] list-style - 목록 속성 한꺼번에 지정 (0) | 2021.04.12 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday