Creating a background gradient?

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).
 
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.webp
(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.webp

Obviously, this appearance is undesirable, but I don't know how to fix it. Any advice would be greatly appreciated.
 
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.
 

Attachments

  • Gradient_seamlessrepeat_bod.webp
    Gradient_seamlessrepeat_bod.webp
    69.9 KB · Views: 18
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.
Style Properties -> General - > Body -> Background correct? If I put a color there instead of a gradient image, it's just a solid background. :confused:
 
Style Properties -> General - > Body -> Background correct? If I put a color there instead of a gradient image, it's just a solid background. :confused:

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";
}
 

Attachments

  • gradient_repeat_nick.webp
    gradient_repeat_nick.webp
    19.2 KB · Views: 16
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.
 
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";
}
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.webp

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

What dimensions are your gradient image?
 
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.
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.
 
Top Bottom