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

Creating a background gradient?

Nick

Well-known member
#1
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).
 

Nick

Well-known member
#2
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.
 

Shelley

Well-known member
#3
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

Nick

Well-known member
#4
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:
 

Shelley

Well-known member
#5
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

Ryan

Well-known member
#6
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.
 

Nick

Well-known member
#7
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.png

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

What dimensions are your gradient image?
 

Nick

Well-known member
#8
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.