sticky nav background-img on scroll issue

[r_tist]

Hi,

I applied a background image to my sticky navbar. However, it only appears upon scrolling  the page.
Initially, the background is transparent. - I cannot find how to target this to ensure my background image also reveals prior to end-user scrolling...

In property inspector, I see element.style {background-image: none;} and when I turn off that style, the background-img successfully displays.

Question is, there is no element.style in the CSS or HTML. - It's like a phantom style. ...How do I pinpoint this to remove from the code?

<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 d-block" data-navbar-on-scroll="data-navbar-on-scroll" style="background-image: none;">

Thank you.

[Nancy OShea]

I can't picture a background-image on a navbar.  A background-color maybe, but not an image.

What's the URL? 

Upload your page and supporting files to a server you control so we can see what you mean.

[osgood_]

<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 d-block" data-navbar-on-scroll="data-navbar-on-scroll" style="background-image: none;">

Thank you.

By @r_tist

Isn't the answer in the code block you supplied - style="background-image: none;"

[Nancy OShea]

Your navbar is light color scheme without a bg-color.  I don't know why you're using data-scroll.  It has nothing to do with backgrounds.

What you have now:

<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 d-block">

To add a contextual bg-color (primary, secondary,  success, danger, warning, info, dark, light, white):

<nav class="navbar navbar-expand-lg navbar-light bg-info fixed-top py-3 d-block">

To add linear bg-gradient:

<nav class="navbar navbar-expand-lg navbar-light bg-info bg-gradient fixed-top py-3 d-block"

Bootstrap Background Utilities Explained:

https://getbootstrap.com/docs/5.1/utilities/background/

[BenPleysier]

Unfortunately, you are only showing the code that you think is relevant. Actually, there is much more to show.

`data-navbar-on-scroll` allows a certain feature to show once the page is scrolled. In this case it is a background image, one that is initially hidden.

Be careful when using `navbar-light` in Bootstrap 5.3.+, it has been depricated. See for more:

https://youtu.be/zsPaZOqe2eA?si=8BvgffMUTQlcF23v