Фото-фон стабилен при прокрутке [CSS] Библиотека javascript + CSS

SE@RCHER

SE@RCHER

Золотая библиотека JAVASCRIPT

Библиотека JAVASCRIPT + CSS

Золотая библиотека JAVASCRIPT

Библиотека JAVASCRIPT + CSS

Золотая библиотека JAVASCRIPT

ЛУЧШИЕ JAVASCRIPT

Золотая библиотека JAVASCRIPT

1997

лучшие сказки мира

работает в: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

HTML ↴

размер Kb

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Фото-фон стабилен при прокрутке  [CSS]</title>
<style type="text/css">
html, body {width:100%; height:100%; padding:0; margin:0; background:#fff;}
html {overflow:hidden;}
body {
font-family:verdana, arial, sans-serif; font-size:12px;
background-image: url(krolik.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
#content {padding:5px 300px 20px 200px;}
p {line-height:22px; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:160px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style>

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<body><h1 style="text-align:center;font: bold 24px Arial,sans-serif; color:#FFCC66;;text-shadow: 1px 1px 2px #000;behavior: url(byn.htc);}">
<script type="text/javascript">
document.write(document.title)
</script></h1>
<div id="fixed">
<h4>Background Image v2</h4>
<p>This version uses CSS3 background-size to make the body background image 100% x 100% but only works in non-IE browsers at the moment.</p>
<p>See <a href="#">Version 1</a> which works in all browsers</p>
<p>Back to <a href="#">HOME PAGE</a> and hundreds more demos</p>
<p><a href="#" title="Your comments">Comments</a></p>
</div>
<div id="scroller">
<div id="content">
<h1>ПРИ ПРОКРУТКЕ СТРАНИЦЫ КУРСОРОМ ФОТО-ФОН СТАБИЛЕН</h1>
<h3>Текст текст текст текст текст текст</h3>
<h2>Текст текст текст текст текст текст</h2>
<pre>

</pre>
</div>
</div>

<script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

ПРИМЕР ↴

Библиотека JAVASCRIPT 1997- Дизайн и сопровождение © SE@RCHER