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

XF 1.4 How do I use an image for background header

Discussion in 'Styling and Customization Questions' started by audiokid, Jan 6, 2015.

  1. audiokid

    audiokid Active Member

    Styling is new to me, sorry if this question has been asked more than once.

    How do I use a background image instead of the standard blue colour for Xenforo?

  2. Russ

    Russ Well-Known Member

    Style properties -> header and navigation -> header you can remove he blue color there and also set an image
  3. audiokid

    audiokid Active Member

    Thanks for chiming in, Russ!

    I was thinking the same. I'm assuming I simply upload an image and tell the style to look there? but what code do I add in the style?
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Like this:


    Just ensure the path matches where you upload the image file (and the name).
  5. audiokid

    audiokid Active Member

    That was easy, thank you!
  6. craigles700

    craigles700 New Member

    I did this as well, but its not taking. Is there a setting in the color pallet that needs to be made to display the image?

    Is the a minimum/maximum file size to do this?
  7. broomhandle

    broomhandle New Member

    I would also like to know the size of the image. not file size...
  8. Dalton Prock

    Dalton Prock Active Member

    It should just display no matter the size, where is the image coming from? From your web server or from another website?
  9. craigles700

    craigles700 New Member

    mine is in the web directory. I can get a smaller png to work, but not without repeating and creating the seems. I prefer one image for the entire page, and that's where i am having an issue.
  10. Dalton Prock

    Dalton Prock Active Member

    I'd say stick with a picture that is sized to 1024 x 1024 as that might work without repeating. In the header and navigation menu, make sure it is set not to repeat the image.
  11. craigles700

    craigles700 New Member

    GOT IT! thank you.

    Is there a way to make the footer transparent to allow the page background to come through?
    Dalton Prock likes this.
  12. Dalton Prock

    Dalton Prock Active Member

    Go to your Style Properties before editing the style of the footer. Then just make it transparent in the color picker.

Share This Page