소스
* position: fixed; 가 고정하는 기능을 한다.
* background-repeat: no-repeat; 는 이미지의 중복되는 것을 막아준다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body{ margin: 0px; padding: 0px; } #bar{ border: 1px red solid; } img{ width: auto; height: 80px; } #img01{ position: fixed; background-color: aquamarine; width: 100%; height: 250px; background-image: url(uuu.jpg); /*background-size: 50%;*/ background-repeat: no-repeat; /*background-attachment: fixed;*/ } </style> </head> <body> <!-- <img alt="" src="googlelogo.png" /> <div id="bar"> </div>--> <div id="img01">다음의 이미지는 로고</div> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/> </body> </html> | cs |
결과
스크롤을 내려도 따라오는것을 알수있다.
'* Programming > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] 제휴 사이트 연결하기 (0) | 2016.09.26 |
|---|---|
| [HTML/CSS] 숨김기능&선택지시자 (+와 ~의 차이) (0) | 2016.09.26 |
| [HTML/CSS] 테이블 만들기(지시자) (0) | 2016.09.22 |
| [HTML/CSS] 지시자 우선순위 (0) | 2016.09.22 |
| [HTML/CSS] 이미지 넣기 (0) | 2016.09.22 |