Jquery Tutorial on how to Position Backgrounds
Today I will tell you about another one useful tool of JQuery – backgroundPosition plugin. It allow to reach different design ideas with color/background changing.
As example, we want to create animated user friendly buttons or website navigation menu.
Someone can ask, why we need script if we can use hover effect + CSS styles. Here you will able to compare possibilities and see advantages of JQuery.
Here are Some very attractive samples:
How to do this? Not so difficult:
Step 1. HTML
Here are sources of all 5 samples. As you notice – we having simple unordered list, they all quite same, only have different ‘id’ attribute.
<ul id="ex1">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
</ul>
<ul id="ex2">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
</ul>
<ul id="ex3">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
</ul>
<ul id="ex4">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
</ul>
<ul id="ex5">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
</ul>
Step 2. CSS
<style type="text/css">
h2 {padding-top:20px;clear:both;}
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;margin:0;padding:0;text-align:center;}
li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
li a:hover, li a:focus, li a:active {background-position:-150px 0;}
li a {background:url(bg2.jpg) repeat 0 0;}
#ex1 a {background:url(bg.jpg) repeat -20px 35px;}
#ex2 a {background:url(bg2.jpg) repeat 0 0;}
#ex3 a {background:url(bg3.jpg) repeat 0 0;}
#ex4 a {background:url(bg4.jpg) repeat 0 0;}
#ex5 a {background:url(bg4.jpg) repeat 0 0;}
</style>
Step 3. JQuery
<script type="text/javascript">
$(function(){
$('#ex1 a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
$('#ex2 a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$('#ex3 a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
$('#ex4 a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
$('#ex5 a')
.css( {backgroundPosition: "0 0"} )
.click(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:200})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
</script>
Step 4. Images
Also we need few images for these demos:
| I am web developer with huge experience (in web languages and even in system languages). Also I am the founder of current website (and several another). I like to write blogs about web development/design. Feel free to Follow us on Twitter: tweetmeme_screen_name='AramisGC'; | If you Enjoyed our article don't forget to Share the love with your friends. |


Great article! I like how you compare the CSS version with the jQuery version. Very useful.
…. a great collection of tutorials using Jquery for correctly positioning backgrounds on websites…. a dynamite post here at “ScriptTutorials” !!
Great article. Thanks for putting together! Cheers Ted
While the enumeration has different ‘id’ attributes, it is but well laid and easily understood. And before I forget, the live demo is very much helpful.
Great article. But it seems like most of the comments are for advertising. May be you have wrote comments by yourself. Anyway, that has worked.
Yes, this is possible that some previous comments was made by some bots, but I prefer comments of real readers. So I even enable captcha to filter all spam
haha ,,,i have finished a photo followed as your procedures ….thank you very much …Hope you teach me more knowledge …