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

XF 1.2 HTML Background and Page Width

Discussion in 'Styling and Customization Questions' started by Amaury, Oct 22, 2013.

  1. Amaury

    Amaury Well-Known Member

    So me and another person worked on a style for DOTATalk -- I did the styling via the style properties and color palette; he did the graphics. However, I just had to rebuild it to fix something I couldn't fix with it all customized. (Although it was accidental that I reverted all style properties, but I just went along with it.)

    I don't know what our graphic artist did to get the forum to look like our homepage -- notice how the homepage has a fixed width, the HTML background shows more and covers the whole page and the HTML background doesn't move when scrolling.

    I feel that because I reverted the style properties, I should be the one to fix this, not our graphic artists, so if anyone could help me out, that would be greatly appreciated.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    For reference:
    http://xenforo.com/community/threads/wallpaper-size.22055/

    It's not necessarily exact instructions for you, but it hits on all of the relevant areas complete with code and screenshots.

    In your case you may wish to apply the background image to the HTML property instead of Body. To make it so the image doesn't scroll you need to add background-attachment: fixed; to whichever property has the background image. The background-attachment: fixed; is normally added to the Miscellaneous area of the property.
     
    Amaury likes this.
  3. Amaury

    Amaury Well-Known Member

    It was actually already in HTML. :)

    Okay, I got the background fixed; now, how do I get the width so I can show more of it? I tried adding a number to the width in Page Width Controller, but it just moved everything to the left.
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Amaury likes this.
  5. Amaury

    Amaury Well-Known Member

    Thank you.

    Now, how do I stretch the image? Notice how on the homepage the headphones go to the edges of each side of the screen, but on the forum it doesn't? The image I have is 2000 x 768, if that's of any help.
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Also in that thread I mention background-size which you can use to size the background image.
     
    Amaury likes this.
  7. Amaury

    Amaury Well-Known Member

    Didn't seem to work.
     
  8. Amaury

    Amaury Well-Known Member

    @Jake Bunce: I just wanted to let you know this has been sorted. The background image was stored locally on the server, as well as the logo, I just didn't know the paths. Nights was able to fix it.

    @Nights: I'm sorry I messed up.
     
  9. BassMan

    BassMan Well-Known Member

    That thread helped me a lot for my forum background. Thank you.

    @Jake Bunce, how can I show background image only on desktop computer and not on mobile phones or tabs? So I don't want to show in responsive.
     
    Last edited: Dec 28, 2013
  10. katsulynx

    katsulynx Well-Known Member

    If you know your Responsive Page Width for Desktop Display (you can look it up in the Style Properties/Responsive Design), you can add the following to your extra.css:
    PHP:
    @media (min-widthYOUR PAGE WIDTH) {
    html //Depending on where you have stored the picture, it may be "body" instead of "html"
      
    backgroundurl(YOUR URL);
    }
    }
    You may need to remove the background picture out of your style properties or extend the code snipped above by "!important"
    PHP:
      backgroundurl(YOUR URL) !important;
    }
     
  11. BassMan

    BassMan Well-Known Member

    Don't know if I'm doing it right. I got this code now:
    PHP:
    @media (min-width976px) {
    html //Depending on where you have stored the picture, it may be "body" instead of "html"
      
    backgroundurl(styles/default/xenforo/background/green.jpg) !important;
    }
    }
    Removed background picture from style properties, but no background for now.
     
  12. katsulynx

    katsulynx Well-Known Member

    PHP:
    @media (min-width976px) {
    html {
      
    backgroundurl(/@imagePath/xenforo/background/green.jpg) !important;
    }
    }
    This should work for every page. But it only works if your page width exceeds 976 Pixel in width. If it is smaller, there is no background assigned.
     
    BassMan likes this.
  13. BassMan

    BassMan Well-Known Member

    Works! Thank you very much!

    So I guess on average desktop it should show the background image, on phones and tablets not. Am I right?
     
  14. katsulynx

    katsulynx Well-Known Member

    Probably. You can lower your page width by making your browser window smaller. As soon as it is 975 Pixel or Smaller, the Background Image should dissappear and reappear, if you make it wider again.

    The average widths however are:
    Code:
    @media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
    @media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
    @media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
    @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
    @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
    @media (min-width:1281px) { /* hi-res laptops and desktops */ }
    So you may want to chose the 3 fitting you most.
     
    BassMan likes this.
  15. BassMan

    BassMan Well-Known Member

    No, I'm not right...
    Yes, that is what I want now. Thank you again.

    Btw, now I have no header background color because of the background image. How can I set the header background color to show only when background picture is not active?
     
  16. katsulynx

    katsulynx Well-Known Member

    setting it inside the opposite media-querry should do the magic

    Code:
    @media (max-width: 976px) {
    #logo {
      background-color: YOUR COLOR !important;
    }
    }
     
    BassMan likes this.
  17. BassMan

    BassMan Well-Known Member

    Great, I just need to change #logo to #header to show right.

    Now you really helped me a lot with this. Very interesting thing this coding :)
     
  18. Brogan

    Brogan XenForo Moderator Staff Member

    BassMan likes this.

Share This Page