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

XF 1.2 Resize Background image for different resolutions?

Discussion in 'Styling and Customization Questions' started by Ren3gade10, Sep 15, 2013.

  1. Ren3gade10

    Ren3gade10 Member

    Well on my site I use a background image. I can't remember what the image size is, but when I look at the site on my 1920x1080 monitor, it looks perfect.

    But when I use a different PC or Mac with other resolutions, the image doesn't fit perfectly. Some resolutions you can only see about half of the background image, and some resolutions the background image is shifted far to the right, etc etc.

    How can I fix this to fit all resolutions perfectly and center?
  2. Tracy Perry

    Tracy Perry Well-Known Member

    Where you define your background image use CSS.

    Another option is to use javascript
  3. Ren3gade10

    Ren3gade10 Member

    I did the first option.

    I put in my Miscellanous box (where you can enter CSS for the background image)
    background-size:1884px 1052px;

    But when I change my resolutions on my screen it will moves the background image to different places and doesn't show it perfectly like it does when I'm on 1920x1080 resolution.
  4. Tracy Perry

    Tracy Perry Well-Known Member

    Your best option will probably be the javascript route. It's not really that hard to implement.
    You may also want to try background-size: contain or background-size: 100% (or auto)
  5. Tracy Perry

    Tracy Perry Well-Known Member

  6. Ren3gade10

    Ren3gade10 Member

    Ehh that didnt seem to do the trick either.
    Can you please explain to me how to install that javascript backstretch?
    When I click to download it on their site it just hows a page with a bunch of code.

    EDIT: I followed this: http://www.calebgittins.com.au/news/tutorial-full-screen-backgrounds-with-jquery/

    But It still isnt working on my site. I downloaded the backstretch file (i had a brainfart before), and i uploaded it to public/js/jquery/jquery.backstretch.min.js

    and I added this to my footer template.

    <script type="text/javascript" src="<?php bloginfo('template_url');?>./js/jquery/jquery.backstretch.min.js"></script>
    <script type="text/javascript">
    $.backstretch("<?php bloginfo('template_url');?>./styles/mystyle/xenforoe/images/bg2.jpg", {speed: 150, centeredX: false, centeredY: false});
    Changed resolutions.. still messed up.
    Last edited: Sep 18, 2013
  7. EQnoble

    EQnoble Well-Known Member

    can you link me to your forum
  8. Tracy Perry

    Tracy Perry Well-Known Member

  9. Tracy Perry

    Tracy Perry Well-Known Member

    You may also want to start a conversation with @Russ as they use it on their Splash style.
  10. Ren3gade10

    Ren3gade10 Member

    Yeah I'm talking to Russ. Thanks!
    Tracy Perry likes this.
  11. Tracy Perry

    Tracy Perry Well-Known Member

    Good deal. @Russ & @Steve F are good people. I use one of their styles on two of the forums that I have and on the rare occasion I need support what they provide is A+. They are also a wealth of knowledge on styling between the two of them.
    Russ likes this.
  12. Ren3gade10

    Ren3gade10 Member

    I agree! I have only worked with Russ, and he is great! (He did my custom style)

Share This Page