Background Opacity

Brendon Meynell

Active member
Hey All,
So I am new to xenforo so please forgive me if this has already been asked and answered (I did attempt to search but it came up with not many relevent threads).

So I am working on my first style and so far have found everything relatively easy. However have come to a sticking point that I was hoping someone may be able to help with.

I am wanting to give my content-background an opacity of 0.4 - however it makes everything (including forum rows etc the opacity) I am attempting to just get the white stuff around everything to have the opacity.

Here is a screenshot of what I am talking about.

So I have the black background (#000000) and would like to keep the white etc where it is and how it is. The only stuff I want to change to have the opacity is the stuff in the grey/black (#333333) rectangles that I have drawn on there.

Is there some sort of code I can put in the additional html sections, or in extra.css that can help me achieve this?

Hopefully I have gone into enough description. Your assistance will be greatly appreciated.

Jake Bunce

XenForo moderator
Staff member
I encountered the same problem when I was messing with opacity. My solution was to use a PNG image for the background, where the image itself has alpha transparency. For example, here is a blank image with 50% opacity that you can use for a repeating background.


Brendon Meynell

Active member
Just to confirm (sorry only brought this software a couple hours ago and don't want to break it) that is for the content background - when i get to that setting I put that as the background?

Sorry - only thing I hate about new software - looking like a complete newbie!

Jake Bunce

XenForo moderator
Staff member
For example:

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

Screen shot 2011-11-06 at 2.04.42 AM.png

Point it to the location of the image on your server.

And you will likely want to set the background color to be transparent, otherwise it will merely be an opacity layer on top of @content's own solid background color. Some extra CSS may also be required to completely remove the solid background color:

Admin CP -> Appearance -> Templates -> EXTRA.css

#content .pageWidth
	background-color: transparent !important;
Here is the result (using a background image in Body to really show the opacity effect):

Screen shot 2011-11-06 at 2.22.18 AM.png