I played with this for a while and achieved the general effect you are looking for:
View attachment 7369
CSS changes are listed below. You will need to play with it to get it exactly the way you want. But this code should help you.
Note that the free-floating background image (when you scroll) isn't working. For some reason the background-attachment attribute (which is provided in the code below) is lost in the compiled output. I have posted a
bug report about this.
__________
Admin CP -> Appearance -> Templates -> xenforo.css
Find this code:
Code:
body
{
@property "body";
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
color: @contentText;
word-wrap: break-word;
line-height: 1.27;
@property "/body";
}
Add the background attributes as shown below:
Code:
body
{
@property "body";
background-color: #222222;
background-image: url(http://anim.tv/public/style_images/bubblesteel/bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
color: @contentText;
word-wrap: break-word;
line-height: 1.27;
@property "/body";
}
_____
Admin CP -> Appearance -> Templates -> public.css
Find this code:
Code:
#content .pageWidth
{
background-color: @contentBackground;
/*border-left: 1px solid @primaryLighterStill;
border-right: 1px solid @primaryLighterStill;*/
}
#content .pageContent
{
@property "content";
background-color: @contentBackground;
padding: 10px 20px;
@property "/content";
}
Remove the background attributes like so:
Code:
#content .pageWidth
{
/*border-left: 1px solid @primaryLighterStill;
border-right: 1px solid @primaryLighterStill;*/
}
#content .pageContent
{
@property "content";
padding: 10px 20px;
@property "/content";
}
_____
Admin CP -> Appearance -> Templates -> xenforo_sections.css
Find this code:
Code:
.sectionMain
{
@property "sectionMain";
background-color: @contentBackground;
padding: 10px;
margin: 10px auto;
border: 1px solid @primaryLighter;
border-radius: 10px;
@property "/sectionMain";
}
Add the opacity attribute as shown below:
Code:
.sectionMain
{
@property "sectionMain";
opacity: 0.5;
background-color: @contentBackground;
padding: 10px;
margin: 10px auto;
border: 1px solid @primaryLighter;
border-radius: 10px;
@property "/sectionMain";
}
In the same template, find this code:
Code:
.secondaryContent
{
@property "secondaryContent";
background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 10px;
border-bottom: 1px solid @primaryLighterStill;
@property "/secondaryContent";
}
Add the opacity attribute as shown below:
Code:
.secondaryContent
{
@property "secondaryContent";
opacity: 0.5;
background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 10px;
border-bottom: 1px solid @primaryLighterStill;
@property "/secondaryContent";
}