background-img 삽입을 위한 사전 작업
1. 이미지 다운로드
2. Eclipse에 이미지 복사
#background1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.d1 {
background-color: aqua;
}
.div{
background-color: skyblue;
width: 20%;
padding: 20px;
border: 5px dashed black;
}
.ddl{
background-clip: border-box;
}
.dd2{
background-clip: padding-box;
}
.dd3{
background-clip: content-box;
}
.dd4{
width: 500px;
height: 500px;
background-image: url(img/%EA%B3%A0%EC%96%91%EC%9D%B4.jpg);
border: 1px solid black;
/*이미지 반복되지 않도록 설정*/
background-repeat: no-repeat;
/*이미지 원본 사이즈를 유지하면서 border안에 들어오도록 축소*/
/*background-size: contain;*/
/*border에 맞춰서 이미지 확대*/
/*background-size: cover;*/
background-size: 300px 300px;
}
.dd5{
width: 500px;
height: 500px;
border: 1px solid black;
background-image: url(img/kakao_icon.jpg);
background-repeat: no-repeat;
/*카카오 이미지 위치 이동하기*/
/*background-position: 100px 100px;*/
background-position: right center;
}
body {
background-image: url(img/%EA%B3%A0%EC%96%91%EC%9D%B4.jpg);
background-repeat: no-repeat;
/*마우스 휠을 내려도 고양이 이미지 고정*/
background-attachment: fixed;
}
.dd6{
width: 100px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<div class="d1">안녕하세요</div>
<hr>
<div class="div dd1">테스트문구1</div>
<br>
<div class="div dd2">테스트문구2</div>
<br>
<div class="div dd3">테스트문구3</div>
<hr>
<div class="dd4"></div>
<hr>
<div class="dd5"></div>
<hr>
<div class="dd6"></div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 00_CSS(애니메이션) (0) | 2020.10.13 |
|---|---|
| 04_CSS(색상배경(2)) (0) | 2020.10.13 |
| 03_CSS(레이아웃스타일(2)) (0) | 2020.10.13 |
| 03_CSS(실습예제) (0) | 2020.10.12 |
| 03_CSS(레이아웃스타일(1)) (0) | 2020.10.12 |