Using "background-image" in footer template. (javascript back to top button)

[Greenpk]

Anyways I just want to know something about the css styling of it, by using images to describe what is going on.
Attachment

This is my button, removed the background color and tried to use background-image instead.
I uploaded the image file to this directory: images/primus/sandy/buttons
I tried to switch out the "background: #FFF;" with "background-image:url('forum/images/primus/sandy/buttons/top_button.png');"

I am currently using html <style> tags with css, so I have no idea how to make the image appear inside the back to top button.

Image is like 144px wide or something. I have tried to adjust the padding, but that doesn't work either.

<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop' ).fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').ani mate({scrollTop:0},800);});});
</script>
<style>
#bttop {
border:2px solid #4adcff;
border-radius: 15px;
background: url('images/primus/buttons/top_button.png');
text align:center;
padding:0px;
position:fixed;
bottom:35px;
right:-15px;
cursor:pointer;
display:none;
color:#fff;
font-size:15px;
font-weight:900;
}
</style>

that is the script being used to create the button.

[Wayne Luke]

CSS images are loaded relative to the CSS itself, not necessarily the file that calls the CSS. What is the HTML that you're applying the CSS to?

[Greenpk]

<div id='bttop'>Back To Top</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

</div>