Adding a background image to block header with gradient?

Russ

Pixel Exit Staff
Probably the easiest method would be to use our custom div:
Code:
.block-header
{
   position: relative;
    .block-header--image
    {
        width: 100%;
        height: 100%;
        position: absolute;
        right: 0;
        opacity: 0.8;
        background-image: url(styles/STYLEFOLDER/xenforo/sources/header-background.png);
        background-position: right top;
        background-repeat: repeat;
    }
    .collapseTrigger, .block-header--left a
    {
        position: relative;
        z-index: 2;
    }
}

The collapseTrigger portion will make it so it shows above the background image rather than hiding behind it.


Then, by default there's a gradient: Style properties -> Blocks -> Block Header, I hope that helps!
 
Last edited:

Russ

Pixel Exit Staff
Probably want something like this:

Code:
.message-header .message-attribution
{
    position: relative;
    .message-attribution-main:before
    {
        background: url(@xf-xbStyleFolder/xenforo/bg-mesh.png) repeat 0 0;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    .message-attribution-main a, .message-attribution-opposite
    {
        position: relative;
    }
}
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.