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:

Svoboda

Customer
Where is that custom div found? I searched for ".block-header--image" and nothing was returned.

I tried putting that in extra and it didn't work.
 

Russ

Pixel Exit Staff
block-header--image is just a div inside the category header. I may need to see the site live to see what's going on.
 

Russ

Pixel Exit Staff
Thank you, try my updated CSS (just update your image). Let me know if that works.
 

Svoboda

Customer
Yep, that worked.

The other place I had planned to use that is for the message header. Do you know if the same code would work for those respective classes?
 

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.