working with background image

Ryan Kent

Well-known member
I am looking at the xenforo.css template trying to adjust my background image. I am just learning html/css and I've tried making changes unsuccessfully.

    @property "html";
    background: @veryDarkMonochrome url('@imagePath/xenforo/background_main.jpg') no-repeat;
    background-position: top;
    background-attachment: fixed;
    @property "/html";
    overflow-y: scroll !important;
I have worked a lot today trying many things out. The problem I have is the background image starts at the very top of the page. The header and navigation tabs conceal the top of my image. I'd like the image to begin right after the end of the navigation bar border. I've tried working with the background-position property using %, and px adjustments. I've also tried padding but it seems that works for anything except the background image.

Any ideas would be appreciated.

Ryan Kent

Well-known member
Jake, I can't thank you enough. I tried so many combinations but never with 2 px variables. And your suggestion of the transparent header is absolutely perfect!

I am hoping I can impose on you (or anyone who is willing to share their experience) with some follow up questions. I reviewed a few threads including but I am still am struggling on finishing my header area.

I am trying to learn all I can here and one of the obstacles is not knowing the formal names of certain areas of the portal page. Attached is an image of my site. On the left I placed text boxes indicating my guesses at the names of those areas. I am referring to the whole page horizontally speaking even though the boxes are located on the left side. Can you please let me know if my naming convention is correct?

What I am trying to do now that you shared the transparent header idea (which I love and never considered!) is to make the top of my pages styled like the default XF style. The red lines indicate where I would like the Navigation bar (as I call it) and the ?sub-navigation area to end, and then to wrap like the default XF style into the form below. I've been looking to control the color of the background. I am sure it's in ACP > Style Properties. I also looked at several templates I thought would be helpful. I have tried adjusting the properties for anything reasonable I could find, but no success. Can you point me in the right direction?

Also, I notice the rounded corners in the default style. For example, just left of the Home tab. How is that effect achieved? I checked every image in the styles/default/xenforo directory hoping to find something.

Lastly, in the header area you will notice a logo that says "Tera PVP". I would like to center it. Again, I seemed to have searched everywhere I could think of but clearly missed the right spot.


Jake Bunce

XenForo moderator
Staff member
For reference:

Screen shot 2011-02-28 at 9.50.58 AM.png

The outside gap is the difference between the size of the browser window and the width of this class:

Admin CP -> Appearance -> Style Properties -> General -> Page Width Controller

The inside gap is the padding of this class:

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

The rounded corners on the navbar is the border radius on this class:

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

See this post for centering the logo:

Ryan Kent

Well-known member
At that time the image was 2772 x 1080. It was WAY too big, and had a size of 1.6mb. Ultimately I resized it down to 1900 width and was able to get the size down to 0.2mb with a satisfactory reduction in quality.

When all was said and done, this background was a great learning experience for me. My two main learnings where:

- backgrounds need to be small (space on disk) and certainly not more then 0.2mb max

- backgrounds should be attractive but not distracting. That background is gorgeous, I still love it, but as readers eyes move from left to right their attention is taken off of the thread and onto the background. That image doesn't work well as a background.

My current background is very small ?0.1mb, very well liked and not distracting. I would recommend taking a similar approach.
How did you use the image is the whole background (header and footer as well) and how did you make it so the content scrolls, but the image doesn't. Just wondering because I may be using a custom image for my background.

Ryan Kent

Well-known member
Go to ACP > Style Properties > General. Chose the HTML tab.

Choose a Color (in case your image does not load for whatever reason), then enter the Path to your image, usually @imagePath/xenforo/image.png. My other values are No-repeat and Top.

To receive the effect where the background image remains fixed when you scroll enter the following in the Miscellaneous box: background-attachment: fixed;


Well-known member
Hey :) Great looking skin ^^
Would you share with me how you rounded the corners in the sidebar? I have been trying this in so many different css files now with this:

border-radius: 2px 2px 5px rgba(0, 0, 0, 0.3);

but I cant get it to work like the primaryContent already .. dunno why?

You can see the forum we're working on here:

Thanks :)


XenForo moderator
Staff member
Just add a border radius to the .section class, e.g.
.section {
border-radius: 2px 2px 5px;

It doesn't support the rgba attribute though.

Ryan Kent

Well-known member
I went to do the HTML tab and did that, but the image only displays in the footer.
I looked at your site. If you add the following to EXTRA.css it should work
#content {opacity 0%; }
That is not the standard way to do it, but it works. To help further I would need to look at your setup closer. I sent you a forum PM