반응형
배경 이미지 넣기
css 파일에 background-image: url("../frame.png");
css파일 기준 image 파일 넣고
이렇게 되면 반복 이미지로 생성되는데 이것을 방지하기 위해서
css에서 옵션.
background-repeat: no-repeat;
background-size: cover; ->화면에 가득차게
background-position: center; -> 화면 중앙정렬
<br>-> 한줄 띄우기
이것을 이용해서 스크롤 생성
background-attachment: fixed; ->스크롤 내려도 화면고정
기법
div로 영역지정 후에 배경이미지 삽입하고
그안에 내용을 담고나서 div위 아래로 br을 마구뿌려주면 스크롤이 생기면서
스크롤이 지정되는 부분만 배경이 보임.
<br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br>
<div id="yellow">
노란색
</div>
<br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br>
스크롤에 따라 배경이 달라지는 것처럼 느낌.
반응형
'HTML & CSS & JS' 카테고리의 다른 글
layout 1 (0) | 2019.11.22 |
---|---|
정렬 (0) | 2019.11.22 |
margin , padding (0) | 2019.11.21 |
web font (0) | 2019.11.21 |
선택자 (0) | 2019.11.21 |