728x90
이번에는
div안에 배경으로 사진을 넣는 방법에 관하여 알아보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.hi {
background-color: green;
color: white;
height: 120px;
}
</style>
</head>
<body>
<div class="hi">
<h1>배경 사진 넣기</h1>
</div>
</body>
</html>결과 화면
<!DOCTYPE html>
<html>
<head>
<style>
.hi {
background-color: green;
color: white;
height: 120px;
background-image: url("사진 주소");
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="hi">
<h1>배경 사진 넣기</h1>
</div>
</body>
</html>결과 화면
background-image: url("사진 주소");
background-image: url("사진 주소"); 속성은 사진의 주소를 배경에 넣는 것을 의미합니다.
background-position: center;
background-position: center; 속성은 background-image를 설정할 때, 해방 이미지의 위치를 어디에 할지 설정합니다.
background-size: cover;
background-size: cover; 속성은 background-image이미지의 크기를 정합니다.
위 3가지 속성을 같이 사용하면 배경 이미지를 쉽게 넣을 수 있습니다.
728x90
'내일배움캠프 > 내일배움캠프 사전캠프' 카테고리의 다른 글
| HTML/CSS 가운데 정렬하기 (0) | 2024.06.26 |
|---|---|
| 내일배움캠프 스타터 노트 작성 (0) | 2024.06.25 |