Adding a background image to block header with gradient?

[Svoboda]

I know it is possible but I can't seem to figure it out. Has anyone happened to do this? I'm using Nova.

 

[Russ]

Probably the easiest method would be to use our custom div:

.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!

 

[Svoboda]

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]

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.

 

[Svoboda]

It's at sycamorepride.com

 

[Svoboda]

It's at sycamorepride.com

I just had to pull it because I realized made all links unusable.

 

[Russ]

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

 

[Russ]

I just had to pull it because I realized made all links unusable.

Should be fixed with my newest CSS, sorry about that. It was expanding outside the container.

 

[Svoboda]

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]

Probably want something like this:

.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;
    }
}

 

[Svoboda]

Perfect. Thanks for your help as always!