Fixed background cut off by header

Beaver Builder
1

Hi All,

I’ve been looking around and trying different things and I can’t figure this out (though it might be because I’m really worn out right now).

A site I’m building for the company I work for has a fixed image and a fixed header and the image is getting cutoff at top no matter what I’ve tried. It’s probably something simple and I really appreciate any help.

https://daveonline.net/tv/

Dave
P.S. Our company is a non-profit that had to close doors due to pandemic issues and is trying to set up online learning in a hurry with only me on the website. Not really relevant except for explaining why I’m so brain dead right now.

2

Hi, in the row settings > Style tab: Background, try to set the followings:

  • Y position: header’s height value (something like 154 px in your case)
  • Scale: Cover

Capture d’écran 2020-04-05 à 13.36.15
Capture d’écran 2020-04-05 à 13.36.15606×931 55.8 KB

3

I just discovered that this X/Y Position for background in BB row settings is buggy.
It seems to be a known issue that should be fixed in a future release of BB.

Meanwhile, here’s how to apply a vertical offset to the img bg in your case, using custom CSS:

.fl-node-5b5071f639846 > .fl-row-content-wrap {
    background-position-y: 154px;
}

.fl-node-5b5071f639846 is the specific class of your row.
You"ll have to adapt it if you change the row, or better, set a custom class like my-custom-class on the row and modify the CSS like this:

.my-custom-class > .fl-row-content-wrap {
    background-position-y: 154px;
}
4

Hi Avanti,

Thanks for the response! Well, that explains part of my confusion with the BB setting anyway. :slight_smile:
I had tried what you said and re-did just now to see if maybe I did it wrong before and it still didn’t work.

The CSS I had tried before was a bit off, so now I see what was happening. Your help did the trick!

Thanks!