HTML+CSS+JavaScript
13.6
배경 영역
배경 이미지를 넣어 페이지를 더 현대적으로 꾸미겠습니다. 배경 영역은 코드가 매우 간단해서 따로 구분하지 않고 한꺼번에 살펴보겠습니다.
먼저 다음 HTML 코드를 What I Do 영역 다음에 작성합니다.
13/end/html/background.html
<div class="bg"></div>
그리고 CSS 코드를 적용합니다. CSS 속성 중 background-attachment 속성을 fixed로 지정하면 웹 페이지를 스크롤할 때 배경이 이색적인 느낌으로 표시됩니다.
13/end/css/background.css
.bg{
background:url('./images/background.jpg') center center;
background-size:cover;
background-attachment:fixed;
height:650px;
}