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

How do I make my BG look the same on all resolutions?

Discussion in 'Styling and Customization Questions' started by JABRONI, Nov 1, 2011.


    JABRONI Well-Known Member

    I created a background for my website & it looks just fine on 1680x1050 as seen below


    but it doesn't look right on resolutions higher or lower than that as you can see below (1920x1080)


    how do I make it so it shows up the same on all resolutions?
  2. erich37

    erich37 Well-Known Member

    I guess you would need 2 images. one left aligned and the other right aligned.
    I am also looking to solve this.

    Any CSS pros out there to help on this?
  3. Floris

    Floris Guest

    You could set the page bg img to be a negative to the left, and a positive from the top (no-repeat)
    And then the whole content the normal one, to the right, top, repeat-y.

    So, split the image.

    And set a default bg color for both sections. You will also have a page that loads 65% faster.
    Dodgeboard likes this.
  4. ToDie4

    ToDie4 Well-Known Member

    Your forums width is being determined by a fixed width, so screen size does not affect the width of the content, all I can think is you are not telling the background image to align "top center".

    If you apply the background image in the style properties in General/HTML you will see a data entry box to the right of the background field entitled 'position', put top center in there, this will give the background image a fixed position where it will stay at the top of the screen in the centre no matter what image resolution is used by the end user.
  5. erich37

    erich37 Well-Known Member

    what would be the correct image-size to use for a bg-image, so that it will always show fine?
    Or is it better just not to have any bg-image ?
  6. Lone Wolf

    Lone Wolf Well-Known Member

    Could you work it like a sprite sheet? Same image but only left half showing to the left of main content area and only the right half showing to the right of the main content area
    erich37 likes this.
  7. erich37

    erich37 Well-Known Member

    that's a great idea. How to do this?
  8. Lone Wolf

    Lone Wolf Well-Known Member

    I dont know but if you find out then let me know.
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    If it's one big image then you can center it to ensure it is positioned uniformly around the content:

    Admin CP -> Appearance -> Style Properties -> General -> Body

    Screen shot 2011-11-01 at 5.59.41 PM.png

    You can also set a fixed width for the Body so it doesn't change with the size of the browser window. See this thread:

    justwordme likes this.
  10. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Or here is code for using multiple background images:

    Admin CP -> Appearance -> Style Properties -> General -> Body
    > Miscellaneous

    background: url('styles/default/xenforo/node-sprite.png') left center no-repeat, url('styles/default/xenforo/xenforo-smilies-sprite.png') right center no-repeat;
    I am using some default images to demonstrate. This is the result:

    Screen shot 2011-11-01 at 6.20.47 PM.png

    But the images are still subject to the width of the Body (which can change with the size of the browser window). Again, using a fixed body width fixes this. I am using a fixed body width in the above image.
    erich37 likes this.
  11. erich37

    erich37 Well-Known Member


    - my fixed width style has a width of 990px. What size would the left-image or the right-image have to be to make this properly?
    - what happens when somebody browses the website on his mobile phone. Will the image harm the view?

    Many thanks!
  12. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Make sure it's a fixed body width and not just a fixed content width. Without a fixed body width you cannot depend on the width of the body being the same for the purpose of precisely fitting a background image around the content, unless it's one big image and you center it.

    erich37 likes this.
  13. ceribik

    ceribik Active Member

  14. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Here is something you can try:

    Admin CP -> Appearance -> Style Properties -> General -> Body
    > Miscellaneous

    Add this property:

    background-attachment: fixed;
    That will cause the background image to remain fixed while the rest of the page scrolls normally.

    For reference:

    ceribik likes this.
  15. ceribik

    ceribik Active Member

    Thanks. I tried adding that property but it didn't fix the issue. It still cuts out at the same place as before.

    Any other ideas? Might try looking at that link..
  16. Mopquill

    Mopquill Active Member

    Have you tried the CSS property background-size?

    background-size:100% auto;
    Unless I'm misunderstanding your needs, that should make the width fit their resolution, and the height match proportionally. If you're more concerned about the height matching, you can switch 100% and auto. That should get it to be pretty close, though it seems your layout is fixed width. Try sending page width in % rather than px. Also, unless you serve up different images for different resolutions (easily accomplished with JavaScript for detecting the resolution, and then serving up different images with their JavaScript or PHP), you'll likely always have differences between different aspect ratios.
  17. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Try shrinking the image to fit better within the browser window.
  18. ceribik

    ceribik Active Member

    Tried a few things based off that but it didn't help. I'm pretty sure the issue is due to the style cutting the page short, but I'm not sure were to look..
  19. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The page is only as tall as the content which varies. But if you use background-attachment: fixed; then you can at least fit the background to the height of the browser window which is more consistent.

    Here is an example of a forum that uses a "fixed" background image:


    You will notice the image stays fixed as you scroll.
  20. ceribik

    ceribik Active Member

    I already tried using that and as I said before, it didn't fix the issue. While it makes the background fixed on the main page, on the other page (with little content), the background doesn't fit to the height of the browser window.

    I also tried fiddling around with the body{} wrapper. Added "height: 10px" which altered only the background height, but setting it to 100% had no effect. Does that help in any way?

Share This Page