** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요.
https://www.youtube.com/watch?v=ukPTssZLPoI
1. 배경이미지 고정처리란?
- 컨텐츠 뒤의 배경이미지를 고정시켜 스크롤이동시 고정된 효과를 주는 기능
- 예시 : http://www.gongju.go.kr/tour/index.do
공주 문화관광
공주 문화관광
www.gongju.go.kr
- 공주문화관광 재단사이트를 보면 [footer]위쪽의 [세계가 사랑한 공주]배너 부분의 배경이미지 스크롤시 고정되는 것을 확인할 수 있다.
- 하단 부분의 배경이미지가 고정처리되서 스크롤시 고정되어 있는 것을 확인할 수 있다.
2. background-attachment 속성
- background-attachment속성이 배경이미지를 스크롤시에도 고정시키는 효과를 준다.
- scroll(기본값) : 배경이미지가 스크롤시 페이지와 함께 스크롤 처리
- fixed : 배경이미지가 스크롤시 페이지와는 다르게 고정처리
background-attachment: fixed;
- 이미지 제공
- 출처 : https://pixabay.com/ko/
1) HTML코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경이미지 고정 처리</title>
<style> /* 스타일 넣기 */ </style>
</head>
<body>
<header></header>
<main></main>
<div class="contents01"></div>
<div class="fixed01"></div>
<div class="contents02"></div>
<div class="fixed02"></div>
<div class="contents03"></div>
<footer></footer>
</body>
</html>- 스크롤을 주기위해 임의적으로 태그들을 작성
- <div class="fixed01"></div>와 <div class="fixed02"></div> 태그에 배경이미지 고정처리를 할 예정
2) CSS코드
*{ padding: 0; margin: 0; }
header{ width: 100%; height: 100px; background-color: pink; }
footer{ width: 100%; height: 100px; background-color: #333; }
main{ width: 100%; height: 600px; background-color: beige; }
.contents01, .contents02, .contents03{ width: 100%; height: 400px; background-color: orange; }- 각각의 컨텐츠의 영역을 잡고 색상 처리
- 스크롤바가 생기도록 여러 컨텐츠 작성
.fixed01{
width: 100%; height: 300px;
/* 배경이미지는 최소 1920*960으로 제작해야 문제가 안생김 */
background-image: url(img01.jpg);
background-repeat: no-repeat; /* 배경이미지X */
background-size: cover; /* 요소를 비율에 맞게 커버 */
background-position: center; /* 이미지를 요소의 정가운데로 처리 */
background-attachment: fixed; /* 스크롤바 움직일때 이미지가 따라다님 */
}
.fixed02{
width: 100%; height: 300px;
/* 배경이미지는 최소 1920*960으로 제작해야 문제가 안생김 */
background-image: url(img02.jpg);
background-repeat: no-repeat; /* 배경이미지X */
background-size: cover; /* 요소를 비율에 맞게 커버 */
background-position: center; /* 이미지를 요소의 정가운데로 처리 */
background-attachment: fixed; /* 스크롤바 움직일때 이미지가 따라다님 */
}- 최근 가장 많은 해상도가 1920x1080이므로 배경이미지는 최소 1920x960으로 제작해야 잘리는 부분이 생기지 않는다.
- 높이를 960으로 두는 이유는 브라우저 상단을 빼고, 운영체제의 작업표시줄을 뺀 높이이다.
- 최근에는 가로 폭을 3000px까지도 많이 제작한다.
- 배경이미지를 처리후 해상도가 1920보다 커도 잘리는 이미지가 없도록 background-size: cover; 를 처리
- 그리고 이미지 비율때문에 배경이미지를 요소의 정가운데 오도록 background-position: center; 를 처리
- 배경이미지가 스크롤시 고정처리되도록 background-attachment: fixed; 를 처리
3) 코드 전체
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경이미지 고정 처리</title>
<style>
*{ padding: 0; margin: 0; }
header{ width: 100%; height: 100px; background-color: pink; }
footer{ width: 100%; height: 100px; background-color: #333; }
main{ width: 100%; height: 600px; background-color: beige; }
.contents01, .contents02, .contents03{ width: 100%; height: 400px; background-color: orange; }
.fixed01{
width: 100%; height: 300px;
/* 배경이미지는 최소 1920*960으로 제작해야 문제가 안생김 */
background-image: url(img01.jpg);
background-repeat: no-repeat; /* 배경이미지X */
background-size: cover; /* 요소를 비율에 맞게 커버 */
background-position: center; /* 이미지를 요소의 정가운데로 처리 */
background-attachment: fixed; /* 스크롤바 움직일때 이미지가 따라다님 */
}
.fixed02{
width: 100%; height: 300px;
/* 배경이미지는 최소 1920*960으로 제작해야 문제가 안생김 */
background-image: url(img02.jpg);
background-repeat: no-repeat; /* 배경이미지X */
background-size: cover; /* 요소를 비율에 맞게 커버 */
background-position: center; /* 이미지를 요소의 정가운데로 처리 */
background-attachment: fixed; /* 스크롤바 움직일때 이미지가 따라다님 */
}
</style>
</head>
<body>
<header></header>
<main></main>
<div class="contents01"></div>
<div class="fixed01"></div>
<div class="contents02"></div>
<div class="fixed02"></div>
<div class="contents03"></div>
<footer></footer>
</body>
</html>
4) 코드 완성뷰
- 스크롤이 배경이미지가 고정되는 것을 확인할 수 있다.
'웹언어 > CSS3' 카테고리의 다른 글
| [CSS3강좌] 27강 CSS flexbox - 오쌤의 니가스터디 (0) | 2020.10.26 |
|---|---|
| [CSS3강좌] 26강 CSS calc()함수 - OSSAM강좌 (0) | 2020.06.04 |
| [CSS3강좌] 24강 animation속성 - OSSAM강좌 (0) | 2020.05.29 |
| [CSS3강좌] 23강 transform(변형속성) - 3D변형 - OSSAM강좌 (0) | 2020.05.28 |
| [CSS3강좌] 22강 transform(변형)속성 - 2D변형 - OSSAM강좌 (0) | 2020.05.27 |
