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

Creating a background gradient?

Discussion in 'XenForo Questions and Support' started by Nick, Oct 9, 2010.

  1. Nick

    Nick Well-Known Member

    When creating a background gradient, what size should the image be? I can't seem to be finding the right size to use and am having issues (my gradient is repeating as blocks instead of going from dark (top) to light (bottom).
     
  2. Nick

    Nick Well-Known Member

    Here's what's happening. I created a gradient with a width of 1px and height of 1000px. It works fine on the homepage and other pages without scrolling:
    gradient_good.png
    (this is just the top portion, but it does go all the way to the bottom and works fine).

    However, on pages with scrolling (such as a thread with several posts), the gradient ends and then restarts, like so:

    gradient_bad.png

    Obviously, this appearance is undesirable, but I don't know how to fix it. Any advice would be greatly appreciated.
     
  3. Shelley

    Shelley Well-Known Member

    go into Style Properties: General background, color box and insert a hex vale or rgb value (or click on white on the selector) If I'm not mistaken this will change text to white so your going to need to venture in the template and change the colouring for the text.
     

    Attached Files:

  4. Nick

    Nick Well-Known Member

    Style Properties -> General - > Body -> Background correct? If I put a color there instead of a gradient image, it's just a solid background. :confused:
     
  5. Shelley

    Shelley Well-Known Member

    Silly question Nick but did you set everything correctly? (look at screenshot)

    venture into the xenforo.css template and check to see if everything as it should be.

    Code:
    body
    {
        @property "body";
        font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
        color: @contentText;
        background: rgb(120, 102, 81) url('styles/default/xenforo/gradients/bg2.png') repeat-x top;
        word-wrap: break-word;
        line-height: 1.27;
        @property "/body";
    }
     

    Attached Files:

  6. Ryan

    Ryan Well-Known Member

    You didn't set "repeat" properly on the background image. Do as in Shelley's code - the "repeat-x top" is the important part in your case.
     
  7. Nick

    Nick Well-Known Member

    Not a silly question at all, as I have no clue what I'm doing. I'm surprised I've gotten as far as I have thus far. :p

    My settings appear to be correct:
    styleprops.png

    And yes, that CSS is as it should be in the template:
    css.png

    What dimensions are your gradient image?
     
  8. Nick

    Nick Well-Known Member

    I didn't have that before, but after seeing it in Shelley's code, I changed it, cleared cache + hard refresh, and still no dice.
     
  9. Shelley

    Shelley Well-Known Member

    width: 1px by height: 800px
     
  10. Shelley

    Shelley Well-Known Member

    Change the colour to white nick in the "color box" that should fix it.
     
    Nick likes this.
  11. Nick

    Nick Well-Known Member

    That did it! Thanks!
     

Share This Page