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

Gradient background

Discussion in 'Styling and Customization Questions' started by LPH, Jan 7, 2012.

  1. LPH

    LPH Well-Known Member

    How do I get a gradient background?

    I'm using General -> Body -> Background Settings

    Xen Gradient Setttings.PNG

    But this doesn't seem to work. The x is correct but the y doesn't go the full distance down the screen.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    If you want it to repeat in both directions then select Repeat.

    If the gradient doesn't extend as far as you want, use an image with a larger height.
  3. LPH

    LPH Well-Known Member

    Thank you. I lengthened the image and now have to match colors better.
  4. Lykke

    Lykke Well-Known Member

    I don't want to create a new thread for this, so sorry to use this one ;)

    I have a bg picture on repeat on a forum. It's light green with dark flowers. I want the page itself to have a gradient from dark in the bottom to normal light in the top.

    When I try doing the above, my background image disappear...

    I am having the image in the HTML though, but it doesn't matter if I place it there or in the body, the result is the same.

    Hope you can help =) Thanks
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Can you post a URL to your forum so I can see the problem?

    Maybe the background image is being covered by the header area. Also note that the HTML background is normally covered by the Body background unless your body is a fixed width.
  6. Lykke

    Lykke Well-Known Member

    It is a forum I'm working on and it's not yet approved and 'public' ;) - so be aware things can look a little weird now :D

  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    And you want the gradient to overlay this image?


    You can do that by adding a gradient image to the Body class. But the image will need to have transparency so the green image shows through. A PNG image with transparency will do it. There are some images in this directory you can try:

  8. Lykke

    Lykke Well-Known Member

    Thanks Jake :) That was actually a thought I had too - but if I do it like that, and the image is set to repeat, wont it add some differences in the gradients?

    The end result should be as close to the main page as possible, which you can see here (with gradient):

  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Lykke likes this.
  10. Lykke

    Lykke Well-Known Member

    Hm yes, just hoped I could add the gradient with the piece of BG I had on repeat lol.

    Well, I just get that image from them instead =)Probably easier lol

    Thanks a bunch ^^

    EDIT: And done :) works.

Share This Page