본문 바로가기

HTML & CSS & JS

background

반응형

배경 이미지 넣기
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