background-attachment Examples

Example 1
scroll, fixed, local
Each move the scroll bar. And also the screen scrolling.

scroll
CSS World
CSS World
CSS World
CSS World
fixed
CSS World
CSS World
CSS World
CSS World
local
CSS World
CSS World
CSS World
CSS World
<style type="text/css">
    .css_test_437 {
        background-image : url('http://superkts.com/img/css/bg0697.jpg');
        border : 1px solid black;
        display : inline-block;
        font-weight : bold;
        height : 400px;
        line-height : 150px !important;
        overflow : auto;
        text-align : center;
        width : 30%;
    }
    .css_test_437 span {
        background : #fff;
        border-radius : 5px;
        padding : 15px;
    }
</style>
Each move the scroll bar. And also the screen scrolling.<br><br>
<center>
    <div class="css_test_437" style="background-attachment:scroll;">
        <span>scroll</span><br>
        <span>CSS World</span><br>
        <span>CSS World</span><br>
        <span>CSS World</span><br>
        <span>CSS World</span><br>
    </div>
    <div class="css_test_437" style="background-attachment:fixed;">
        <span>fixed</span><br>
        <span>CSS World</span><br>
        <span>CSS World</span><br>
        <span>CSS World</span><br>
        <span>CSS World</span><br>
    </div>
    <div class="css_test_437" style="background-attachment:local;">
        <span>local</span><br>
        <span>CSS World</span><br>
        <span>CSS World</span><br>
        <span>CSS World</span><br>
        <span>CSS World</span><br>
    </div>
</center>
Example 2
Show Me The Money !!
background-attachment : fixed
Show Me The Money !!
CSS Examples
<style type="text/css">
    .css_test_438 {
        background-attachment : fixed;
        background-image : url('http://superkts.com/img/css/bg0372.gif');
        border-radius : 10px;
        border : 7px outset black;
        font-weight : bold;
        height : 400px;
        line-height : 400px !important;
        margin-bottom : 50px;
        text-align : center;
    }

    .css_test_438 span {
        background : #fff;
        border-radius : 5px;
        font-size : 15pt !important;
        padding : 15px;
    }
</style>

<center>
    <div class="css_test_438">
        <span>background-attachment : fixed</span>
    </div>
    <div class="css_test_438">
        <span>Show Me The Money !!</span>
    </div>
    <div class="css_test_438">
        <span>CSS Examples</span>
    </div>
</center>
Example 3
Hidden wall view (jQueryUI + CSS)
Try dragging this
<style type="text/css">
    .css_test_440 {
        background-attachment : fixed;
        background-image : url('http://superkts.com/img/css/smpt109.jpg');
        border-radius : 50%;
        color : white;
        cursor : move;
        font-size : 35pt !important;
        height : 500px;
        line-height : 500px !important;
        margin : 0 auto;
        text-align : center;
        text-shadow : 0 0 5px white, 0 0 15px white;
        width : 500px;
        z-index : 999;
    }
</style>

<div class="css_test_440">Try dragging this</div>

<script type="text/javascript">
    $( ".css_test_440" ).draggable();
</script>
Example 4
Ride in dogs (jQuery + CSS)
<style type="text/css">
    .css_test_441 {
        background-image : url('http://superkts.com/img/css/dogs.gif');
        background-repeat : repeat-x;
        height : 150px;
    }
</style>

<div class="css_test_441"></div>

<script type="text/javascript">

    function css_test_441(){
        $('.css_test_441').css({'background-position':'-=1'});
    }
    setInterval(css_test_441, 10);

</script>