positioning background -> jQuery involved

[george]

I am trying to position the background of a div block my css code for the block is

#imgmilestone { display:none;   background:#FFFFFF url(../images/milestone.jpg) no-repeat top right;   width:230px; height:307px; text-align:center; clear:left; }

The display is changed to inline-block in a jQuery function as follows:

$projbut.hover(function(){  $("#imgmilestone").css ( { "display":"inline-block", "position":"relative", "clear":"left", "background-position":"right"  } );	 },function(){  $("#imgmilestone").css( {"display":"none"} );})

I just tried changing the jQuery css property by removing the inline-block and changing that to just block, removed position reatibe and removed clear left. These changes had no effect. The site is here , and the blue buttons activate the div with the background images

[thescientist]

backgroundPositionhttp://stackoverflow.com/questions/1776950/change-background-position-with-jquery in javascript the attributes have to camel cased.

[dsonesuk]

in javascript the attributes have to camel cased.

YES! in javascript, NOT in jquery javascript. 1)background:#FFFFFF url(../images/milestone.jpg) no-repeat top right;should bebackground:#FFFFFF url(../images/milestone.jpg) no-repeat right top;2)$projbut.hover(function(){if 'projbut' is supposed it a id ref it should be $("#projbut").hover(function(){ IF class $(".projbut").hover(function(){3) by just specifying one position property "background-position":"right"the image will position itself center right,

[george]

I tried the suggestions given, but my problem persists. I have a simplified page that just demonstrates the problem here. All the code is in this one file. The goal is to position the background position to the right side of the container. Thanks

[dsonesuk]

you are restricting the width of the container to the same width of the background image, the right image positioning will force it to right edge of this container, which is not the right edge of spacer container, you need to remove the width completely so the this container block element will stretch to the total width available of the spacer parent container. or use jquery to make the image width: auto; on hover of triggering element, and return width, after hover off. Edit: Also inline-block will cause the container if changed to width: auto; to shrink down to content within it, usually paragraph elements, images (not background images), since most of your element are empty they will shrink to zero width. so i would use

<script type="text/javascript">$(document).ready(function(){  $whatbut = $('h4#What');  $estibut = $('h4#Esti');  $assubut = $('h4#Assu');  $projbut = $('h4#Proj');   var holdwidth="";   $whatbut.hover(function(){  holdwidth=parseInt($('#imggoose').css ("width"));  $('#imggoose').css( {'display':'block' , 'width': 'auto'} );	  },function(){   $('#imggoose').css( {'display':'none', 'width': holdwidth+'px'} );  })  $estibut.hover(function(){  holdwidth=parseInt($('#imgclockspiral').css ("width"));   $('#imgclockspiral').css ( { 'display':'block', 'position':'relative', 'clear':'left', 'background-position':'right', 'width': 'auto' } );	  },function(){   $('#imgclockspiral').css( {'display':'none', 'width': holdwidth+'px'} );  })  $assubut.hover(function(){  holdwidth=parseInt($('#imgporpose').css ("width"));   $('#imgporpose').css ( { 'display':'block', 'position':'relative', 'clear':'left', 'background-position':'right', 'width': 'auto'  } );	  },function(){   $('#imgporpose').css( {'display':'none', 'width': holdwidth+'px'} );  })  $projbut.hover(function(){  holdwidth=parseInt($('#imgmilestone').css ("width"));   $('#imgmilestone').css ( { 'display':'block', 'position':'relative', 'clear':'left', 'background-position':'right', 'width': 'auto'  } );	  },function(){   $('#imgmilestone').css( {'display':'none', 'width': holdwidth+'px'} );  })})</script>

[george]

That did it perfectly dsonesuk - thank you