I'm trying to implement parallax in bp-default theme's header, but facing problem ....
The page getting glitches, the adminbar is centre aligned but the rest of the content of the page is getting left aligned , the below image show the example .... http://img822.imageshack.us/img822/1476/bpdparallax.jpg
Cannot change the default header from the default.css file , though I change the background image url under #header to a different file in different location , the page shows the default_header.jpg in every circumstances, even though I hard-refresh the browser ....
the codes I'm using are as follows :
header.php
within the <head></head> tag between the wp_head() and the end of the head tag I place ...
<script type="text/javascript" src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/jquery.jparallax.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#parallax').jparallax();
});
</script>
<link rel="stylesheet" type="text/css" href="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/reset-min.css">
and in the beginning of the <body> tag just after the <div id="header"> I place
<div id="parallax">
<img src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/bubble3.png"/>
<img src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/bubble2.png"/>
<img src="http://localhost/swabandhab/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/parallax/bubble1.png"/>
</div>
and I use
#parallax {
width: 960px;
height: 200px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
this css in default.css file
inspite of these problems the parallax animation is working just fine !
What am I doing wrong ?
