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

XF 1.4 Background Image

Discussion in 'XenForo Questions and Support' started by Bob_R, Sep 13, 2014.

  1. Bob_R

    Bob_R Active Member

    Trying to have a background image which covers the entire screen.

    Tried this in Styles Properties - General - HTML

    #content {
    background: url("/styles/drift/drift/brownbkgd.jpg") no-repeat;
    background-color: transparent !important;
    height: 100%;
    width: 100%;
    And it rendered in the upper left corner and that's it. Is it better to use EXTRA.CSS instead?

  2. Bob_R

    Bob_R Active Member

    OK, I'm getting closer. Just doesn't go all the way down the page. See screenshot to see what I did. Can someone help me finish it off?


    Attached Files:

  3. Bob_R

    Bob_R Active Member

    Got it. Was using no-repeat instead of repeat.
  4. CMGDevel

    CMGDevel Active Member

    Do you have an example URL where this is live? I'd love to see it. And did you end up doing this in EXTRA.CSS?
  5. Bob_R

    Bob_R Active Member

    See my screenshot from post #2. Use Repeat not no-repeat. Upload image you want to appropriate place. No EXTRA.CSS code needed.

    For the record, after all the figuring out I took down that theme.
  6. pfernand

    pfernand Member

    How big does the image need to be? What size did you use?
  7. Tracy Perry

    Tracy Perry Well-Known Member

    Most likely it will depend on whether you are using a static image for the background (just one photo to cover the entire page) or if you are using tiled images. If tiled, the size is not really important - but smaller is better.
  8. pfernand

    pfernand Member

    i'm using a static image.
  9. Tracy Perry

    Tracy Perry Well-Known Member

    It's a fine line.. there is no definite answer unless you are using something like backstretch.
  10. pfernand

    pfernand Member

    i ended up using an image that was 3000 x 2000 and added css ( background-size:cover; ) and it seems to fit ok now. thanks :)

Share This Page