반응형
안녕하세요.
html5은 다양한 css3(스타일시트)를 지원합니다.
많은 웹 페이지에서 배경을 효과적으로 사용합니다.
css에서 배경 속성을 지원하기 때문입니다.
background: 배경의 속성을 한 번에 사용합니다.
background-image: 배경에 사용할 이미지를 지정합니다. url()를 사용합니다.
background-size: 이미지의 크기를 지정합니다. (너비, 높이)
background-repeat: 이미지의 반복을 지정합니다. (가로, 세로 반복)
background-attachment: 이미지의 부착하는 형태를 지정합니다.
background-position: 이미지의 위치를 지정합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<head>
<title>codeomni.tistory.com css 스타일시트 background 배경 속성 소스 코드 예제</title>
<style>
body {
background-image: url(background.png);
background-size: 960px, 640px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<div>
<h1>codeomni background 속성</h1>
</div>
</body>
</html>
|
cs |
▲ 실행 화면입니다.
댓글