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

Mr Lucky

Well-known member
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

Member
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

Well-known member
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:

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

silverSl!DE

Member
thxfor hinting this.(y)
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:
CSS:
/*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:
1538395517253.png
 
Top