Problems with styling


Well-known member
I want to have one huge background picture from the top, filling at least half the screen downwards and fading into the background. How can this be accomplished? I have spent two hours adjusting the @html and @header to correspond, but it refuses to play with me. They just doesn't want to match up. Any help would be appreciated.

Jake Bunce

XenForo moderator
Staff member
Specify a background image for this style property:

Admin CP -> Appearance -> Style Properties -> General -> Body

In the same area, you may wish to set a position for the image so it starts below the header background, like this:

Screen shot 2011-10-12 at 7.00.33 PM.png

Or you can remove the header background by editing this style property and setting a transparent background:

Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Header

Screen shot 2011-10-12 at 7.02.39 PM.png

This is the result:

Screen shot 2011-10-12 at 7.03.05 PM.png


Well-known member
do you have a suggestion of how big the size of the background-image should be?
I have seen some pages with bg-image, and then when looking at the image itself, the browser is showing a "+" and "-" (minus sign) to zoom the image in and out.
Not sure how this is accomplished.

Could you please give a suggestion of how many Pixel the image should be in size? So that it fits to different screen-size resolutions, but still loading fast....

Many thanks?
I want to accomplish what I have sketched down in the picture below. What elements are involved in getting this done the right way? Do I for instance need to split the graphics in different files?

OK. What I would like to achieve is to have a top part image including the face into for example the blue color at the bottom, which is a solid color set in Xenforo. Do I put the faded picture in the header with a height that I like?
Alright. I think I have managed to come up with something that works pretty good (with a few minor issues to sort out). I have put the image as a background in the body. The settings used are as follows:


Now to my issues. When the page is long enough, the background is stretched out normally as in the picture below:


But when I for instance go to the help page, the page is to short and something happens to the background. It does not stretch out as good as before in the dark blue color which I use for the background:


How can I solve this?

Jake Bunce

XenForo moderator
Staff member
Try putting the background in HTML instead of Body, and give Body a transparent background. That should make it fill the height of the window regardless of the content.
It's all starting to come together now. One thing I wonder now is if it's possible to extend the blue line (below the light blue part in the top forum section) to the left and right and to make it follow the bottom of the white header part?


Jake Bunce

XenForo moderator
Staff member