HTML+CSS+JavaScript

13.6

배경 영역

배경 이미지를 넣어 페이지를 더 현대적으로 꾸미겠습니다. 배경 영역은 코드가 매우 간단해서 따로 구분하지 않고 한꺼번에 살펴보겠습니다.

먼저 다음 HTML 코드를 What I Do 영역 다음에 작성합니다.

<div class="bg"></div>

그리고 CSS 코드를 적용합니다. CSS 속성 중 background-attachment 속성을 fixed로 지정하면 웹 페이지를 스크롤할 때 배경이 이색적인 느낌으로 표시됩니다.

.bg{
  background:url('./images/background.jpg') center center;
  background-size:cover;
  background-attachment:fixed;
  height:650px;
}