1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 How can I put a sticky image here?

Discussion in 'Styling and Customization Questions' started by Barbossa, Jan 16, 2014.

  1. Barbossa

    Barbossa Active Member

    How can I put an image here which will stick there even you scroll?

    [​IMG]
     
  2. katsulynx

    katsulynx Well-Known Member

    You could basically use the following code to create a sticky box down there:
    HTML:
    .footer:after {
        content: "";
        background: #fff;
        position: absolute;
        width: 20px;
        height: 20px;
        display: block;
        bottom: 0;
        right: 0;
    }
    To receive a box sticking at the bottom right, but you'll need to do a bit more to have it scale corretly as it will either overlap the forum box next to it or leave a space between itself and the forum if you set it to a fixed with like in the example above.
     
    Manoj_Kumar likes this.
  3. Barbossa

    Barbossa Active Member

    Kat, Its not getting sticky. :(
     
  4. Manoj_Kumar

    Manoj_Kumar Guest

    Try position: fixed instead of absolute.
     
    Barbossa likes this.
  5. Barbossa

    Barbossa Active Member

    Another thing, if you put any text inside, content: ""; it shows. But not images!!
     
  6. Barbossa

    Barbossa Active Member

    It worked, thanks.:) Now can please tell me how to put image in it?
     
  7. Manoj_Kumar

    Manoj_Kumar Guest

    Use content: url(" "); Image source inside the quotes. Adjust width and height according to the image.
     
    Barbossa likes this.
  8. Barbossa

    Barbossa Active Member

    That did the trick! :)

    Can I put any link there too? I mean, If someone click that image, it will go to any thread or any page?
     
  9. Manoj_Kumar

    Manoj_Kumar Guest

    Check this: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

    They have created a separate span and then called the attribute in the CSS. I have not done this before, but this will give you an idea. Otherwise, you can approach the method of normal div for the sticky image instead of :after.

    Code:
    <div class="stickyImage">
        <a href="#"><img src=" "></img></a>
    </div>
    And in CSS use this:

    Code:
    .stickyImage
    {
             position: fixed;
             right: 0px;
             width: 200px;
             height: 200px;
    }
     
  10. Barbossa

    Barbossa Active Member

    That doesn't work. :(
     
  11. Manoj_Kumar

    Manoj_Kumar Guest

    Where have you tried my code?
     
  12. Barbossa

    Barbossa Active Member

    I did put div in footer template and css in extra.css.
     
  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Add to EXTRA.css:

    Code:
    html
    {
    	background-attachment: fixed;
    	background-image: url('path/to/image.gif');
    	background-position: right bottom;
    	background-repeat: no-repeat;
    }
    
     
    Barbossa likes this.
  14. Barbossa

    Barbossa Active Member

    Thanks, but I want to click that image and want to go to a link. :)
     
  15. Barbossa

    Barbossa Active Member

    @Ehren did exactly what I was asking for. :) Thanks mate.
     

Share This Page