Home » » Background Move

Background Move

Posted by Admin Posted on 00:04
Unique Info this time about one of the tricks to make a dynamic background image blog. This trick uses a simple JQuery devoted to create a moving background image (Scrolling Background). This script makes a blog background image moves vertically from the bottom to the top. For bloggers who want to try it please be listened tricks to make scrolling background below.


  • Login » blogger.
  • Draft »Edit HTML.
  • If you have not used the code JQuery JQuery you please put the following code just above the code </ head> .

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>

  • Copy-Paste the following code just above the code </ head> .

    <script type='text/javascript'>
    //<![CDATA[
    $(function(){
    // ***
    // Scrolling background
    // ***
    // height of background image in pixels
    var backgroundheight = 4000;

    // get the current minute/hour of the day
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();

    // work out how far through the day we are as a percentage - e.g. 6pm = 75%
    var hourpercent = hour / 24 * 100;
    var minutepercent = minute / 30 / 24 * 100;
    var percentofday = Math.round(hourpercent + minutepercent);

    // calculate which pixel row to start graphic from based on how far through the day we are
    var offset = backgroundheight / 100 * percentofday;

    // graphic starts at approx 6am, so adjust offset by 1/4
    var offset = offset - (backgroundheight / 1);

    function scrollbackground() {
    // decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
    offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
    // apply the background position
    $('body').css("background-position", "50% " + offset + "px");
    // call self to continue animation
    setTimeout(function() {
    scrollbackground();
    }, 70
    );
    }
    // Start the animation
    scrollbackground();
    });

    //]]>
    </script>
  • Copy-Paste the following CSS code just above the code </ head> to set the background image. You can change the background image to which you want to change the address of hosting images on the CSS code below to the address you have chosen an image hosting.

    <style>
    body {
    background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMF2P6LuiX1Qaja3cvIyUUA3g0194NIf8WaFAjxUUbZh8IG3FSyEl6E5ZxpTI7F7X5cjIRyAseV2ihSwO9Qw0-VzYnJt9jZCNp7Tr1tBEIkPQL2yiOqigNBbFKvI0XqGdTQF3lDEsRSSID/s800/bg.gif) repeat center; background-attachment: fixed;
    }
    </style>

  • Description:
    - repeat / / Repetition of images x and y directions.
    • repeat-x / / Repeating images horizontally only.
    • repeat-y / / Repetition vertical images only.
    - http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif / / URL Link gambar.
    - Center / / location in the middle of the screen image.
    • Left / / What image is on the left image.
    • Right / / What image is on the right image.

Background Image Options


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMF2P6LuiX1Qaja3cvIyUUA3g0194NIf8WaFAjxUUbZh8IG3FSyEl6E5ZxpTI7F7X5cjIRyAseV2ihSwO9Qw0-VzYnJt9jZCNp7Tr1tBEIkPQL2yiOqigNBbFKvI0XqGdTQF3lDEsRSSID/s800/bg.gif



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuULE6oueF9BANNNdHVeaM6B2wDn-wvlq-US5nW7wM9N0llb9pNkUkZwqpyjbwNzGi6SNUZA3CxegI9oNIrtlmamV44SwJzafqtQGcxeGPN0ruTXk5p4iMGoFCW-CSz-z6-Tw8tCSGWne0/s800/bg_star.png



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRO_cUM-OWUYCtqeqgmVrPj3kUnc97qZtb_W_y0Utx8yfvwSIv4ehIlnOBTW55R-PZhJJH6NgRhdEmZh-j0pUDQZpYMf0jNJ7gkqHdEuGGfTyC5gKHEanuCPjobGRDLRt0J1LuGmoHO4J8/s800/bg-clouds.jpg



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiiv-VI_FxkNX46AN48MVb9Lhnf8vNwsmc_yLoj1imw_QynsCauqmZTN0YBA62XTOAAGRCl4ViNXsKFU08GTrky7kxRqCWliaW5RqDKtmWxv8s1JPtx9KdeBvrKTr-b2M6Pfh8uJHUO5Z7/s800/skull-fire-monozcore.png



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4l0A2wC-ZleslVSuq1tdf3PMVvMrs6k8Lky4MwfUF9oXrTgMiYOrsA4q4KJk1rUpqKgkOlQ3KE1ttSpejA_xObHJlfcXCsazUr__vfPKf1ZjnYPqlY-yJMvt9Ob_MfRlGAZ_-BFwS-vJs/s800/dance_flow.png



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqPrusfEhxfeKiFf7qiXZJxrHupXpucV-AEi1wC3mFPOJeoGMpCF9Eq80H19umvpfMSZNUOhJIstifa6jBVXPvkN7MEr0mcKo_4h-HLTuD5DCAoFEP0rEGv3zjkIWNZvjcae3Y1uzCNtDg/s800/ThighHeels.png



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ0iyFS68VjPVkXOR0XfEp3nR1eON8sgggcUT541sXOoBOMQORk-fulPPo4rhkEZjtLht1FkZK-LcRiYAS6_645Q9RdAsKMtuEi78_lt_Jn9nzGveBd57j_N4mlNyYfcQsRNJUX5i31vSq/s800/animated%2520stars.gif



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-IJQL6Rc6T0CKxqJ1NGZXbPIRgcYxR226SBDjKZVCGfo04hm67vAVz5ptf0rB6STfDL8uEQNtrJI2pWP0Y7jyTqYoHIdL8slj_UCJ-rhsrxMyvfMGPAHGv6xOl509SjQGozvhMzraCMZY/s800/animated%2520blue%2520stars.gif



  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4yGEv80jjJ8J5xLT6Kne1K2ALhLidLg472IZ0DV8HWkPBqZNQELrv2JEgF6heUlHJwfIsNIttQd-nLluiiSxbDMxFIZBaRrD3NaoDl6cGezYMY3sdlOcWY0xoOyoq6fkkvJ0bUskqHPSH/s800/devil_angel_lolita_bg.png
.:Luck:.

The Best Technic