Tip&etc; ... Report/com-Tip

[스크랩] 배경그림 고정시키기-태그

monocrop 2007. 6. 22. 01:44
(1)  배경그림 고정 시키기.
<head>와 <style type="text/css">.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; } </style> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/revenue.css"/> <link rel="canonical" href="https://innomy.tistory.com/11106277"/> <!-- BEGIN STRUCTURED_DATA --> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://innomy.tistory.com/11106277","name":null},"url":"https://innomy.tistory.com/11106277","headline":"[스크랩] 배경그림 고정시키기-태그","description":"(1) 배경그림 고정 시키기. 와 사이에 아래의 소스를 넣으세요. 등산복차림의 소녀 이미지가 하단 오른쪽에 고정돼 있습니다. 스크롤바를 움직여도 글자만 오르내리지 이미지는 그냥 있지요. 위의 소스에서 넣고싶은 이미지 주소로 바꿔 주시고 소스 끝에 있는 위치를 수정해주면 됩니다. [위치 정하기 ..","author":{"@type":"Person","name":"monocrop","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2007-06-22T01:44:46+09:00","dateModified":"2007-06-22T01:44:46+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script> <!-- END STRUCTURED_DATA --> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/dialog.css"/> <link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/postBtn.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/comment.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/tistory.css"/> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/script/common.js"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/script/comment.js" defer=""></script> </head>사이에 아래의 소스를 넣으세요. <style type="text/css"> <!-- body {background:url(http://ha927.com.ne.kr/imge/i.gif) no-repeat fixed right bottom} --> </style>

등산복차림의 소녀 이미지가 하단 오른쪽에 고정돼 있습니다.
스크롤바를 움직여도 글자만 오르내리지 이미지는 그냥 있지요.
위의 소스에서 넣고싶은 이미지 주소로 바꿔 주시고
소스 끝에 있는 위치를 수정해주면 됩니다.
[위치 정하기 참고]
left top=> 왼쪽 위.   center top=> 윗부분 가운데.    right top=> 오른쪽 위.   
left center=> 왼쪽 중간.    center center=> 가운데.   right center=> 오른쪽 중간
left bottom=> 왼쪽 아래.  center bottom=> 아래쪽 가운데   right bottom=> 오른쪽 아래.



2. 화면 전체에 간단히 테두리 넣기.


아래 소스를 <body>와 <script type="text/javascript">(function($) { $(document).ready(function() { lightbox.options.fadeDuration = 200; lightbox.options.resizeDuration = 200; lightbox.options.wrapAround = false; lightbox.options.albumLabel = "%1 / %2"; }) })(tjQuery);</script> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/script/menubar.min.js"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"5606271-11106277","customProps":{"userId":"0","blogId":"5606271","entryId":"11106277","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"11106277","categoryName":"Tip&etc; ... Report/com-Tip","categoryId":"686842","author":"5585619","image":"","plink":"/11106277","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/polyfills-legacy.min.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index-legacy.js" nomodule="true" defer="true"></script> </body>사이에 넣어 주세요. <style type="text/css"> <!-- body {border-color: #7983d5 #7983d5 #414572 #7983d5; border- style: solid; border-top-width: 5; border-right-width: 5; border-bottom-width: 5; border-left-width: 5} --> </style>

지금 보시는 화면의 가장자리에 진분홍색 테두리가 보이지요.
위의 소스에서 테두리 색상과 두께는 마음대로 수정할 수 있습니다.
상,하,좌,우의 색이나 두께를 다르게 정 할 수도 있구요. 
출처 : 남은골
글쓴이 : 여촌 원글보기
메모 :