이제 앞에서 배운 내용을 바탕으로, 배경 이미지와 텍스트를 삽입하는 실제 사례를 만들어 보겠습니다. 우선 다소 큰 사이즈의 배경이미지를 하나 준비해 주겠습니다. 여기서 사용하는 이미지는 1920x1207 사이즈입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>example</title>
<meta charset="UTF-8">
<style>
body {
background: url(images/cat_bg_1920_1207.jpg) left top no-repeat fixed;
background-size: cover;
}
h1 {
margin-top: 150px;
font-size: 80px;
text-align: center;
color: white;
text-shadow: 3px 3px black;
}
</style>
</head>
<body>
<h1>Let's Get It On!</h1>
</body>
</html>
이렇게 작성한 코드를 실행하면, 아래 그림과 같이 꽉 찬 배경 이미지로 구성된 화면을 볼 수 있습니다.
자, 그런데 이 배경 이미지가 1920x1207 사이즈의 이미지라고 했습니다. 현재 포지션은 left top으로 고정한 상태이죠. 이때, 브라우저의 사이즈가 1920x1207 이상의 크기로 확장되면 이미지는 어떻게 될까요? 본래의 사이즈에서 가로 크기만 늘어난다면 아래와 같이 변합니다.
반대로 본래 사이즈에서 세로 길이만 늘린다면, 다음과 같이 변하게 되지요.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과2 (0) | 2023.05.15 |
|---|---|
| [CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과1 (0) | 2023.05.13 |
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 4 (0) | 2023.05.09 |
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 3 (0) | 2023.05.06 |
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 2 (0) | 2023.05.04 |
