How To Make Background Scrollable | Blogger Tips

This tutorial tells you about the process to make background of a blog scrollable. It means if the body's size of blog goes out of screen size, a scroll will be appeared automatically. Let's see the step by step processes. Jquery is used here.
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head>tag .
3.Copy below code and paste it just before the </head> tag .
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>

<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>



4.Now scroll down to where you see like this code:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

5.Replace above code with below code:

body {
background:url(http://1.bp.blogspot.com/_4HKUHirY_2U/Suj7uR3ZKfI/AAAAAAAAAGU/R8pnF8urjTk/bgscroll.jpg);
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}



Now you can change your background image replacing above red colored code with your image URL. For getting image URL you can host free image here.Have a nice blogging......

Comments Post a Comment

Francine - October 20, 2010

Great tip! If I want to pause the scroll after so many seconds, or slow the scroll rate down, where in the code would I tweak it to accomplish either effect? Kindly elaborate :)

Dan - November 15, 2010

Hey is this>>>http://btemplates.com/2010/blogger-template-games-place-2/ template for my site and it doesn't have the above html how would i make the background scroll with this template please help?!

Leave a Comment