Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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.

    HTML Code:
    <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.

  • #2
    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?
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

    Comment


    • #3
      Code:
      <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>

      Comment

      widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
      Working...
      X