XF 2.0 Staff bar transparency to show header beneath, not page background

[Mr Lucky]

When you set the staffbar colour to have transparency, it shows the page background colour. I want it to show the header background image, is that possible?

Thanks

 

[silverSl!DE]

Hey there,

I'm looking for the same thing. would it be possible to get the Header as background for p-staffbar? since p-staffbar and p-header are seperate divs?

 

[Mr Lucky]

In the end I never bothered trying to do this, but I'm sure you can with adding the background to the div .p-pageWrapper

Maybe try:

.p-pageWrapper
{
background-image: url("img.jpg");
background-repeat: no-repeat;
 background-position: center top;
}

 

[silverSl!DE]

thxfor hinting this.
1. I removed the header image and set the bg to transparent in the ACP Header/Logo row.
2. set the staff, nav and sub-nav-bar to an opacy of s.th. like 0.6 or 0.7 (like rgba(24, 88, 134, 0.6) and rgba(231, 231, 231, 0.8))
3. put this into the EXTRA.less:

/*HEADER*/
.p-pageWrapper
{
background-image: linear-gradient(to bottom,
   rgba(222,222,222,0) 0%,
   rgba(222,222,222,0.1) 7%,
   rgba(222,222,222,0.3) 8%,
   rgba(222,222,222,0.5) 9%,
   rgba(222,222,222,0.7) 10%,
   rgba(222,222,222,0.9) 11%,
   rgba(222,222,222,1) 12%),
   url("images/header.jpg");
background-repeat: no-repeat;
background-position: left top;
}

Result:

 

[Charlie J]

Ty for sharing, I also wanted to do something like this.

 

[Mr Lucky]

Result:
View attachment 184561

Have you checked it on mobiles?

 

[silverSl!DE]

Have you checked it on mobiles?

yes. I endet up, putting the gradient direct in the header image and fade it to transparent. it's not perfect, but a lot better looking than before. Iguess i have to edit the mobile style a bit.