Issues with background image and linear gradient

Hi everyone,
this is the very first thing I’m trying to do on my own and I’m already stuck! :frowning:

I want a background image in my header’s website and I want to darken it a little bit. So I applied what should be a linear gradient. My background image disappeared and the whole css is ignored.

I checked the syntax with the online validators and both html and css are fine so far. The files’ path are ok too.
The gradient is before the image.
I don’t understand what’s wrong.

Here is my codepen:

Any help is much appreciated!

You can take a look at a forked pen that i modified just as an usage example.

As far I know, you cannot store images on codepen. You have to place your image on a third party storage and then paste it link to url/src.
I recommend using for codepen, there are also other methods available like google drive, dropbox etc.

Hi Sorinr,

I opened your code on my browser and the result is the same: it’s html only! It happens with safari and chrome as well. How is it possible? The files are ok.

Hi Hassanraja447,
thank you for pointing it out to me. It’s not my current issue but it’s good to know it! :slight_smile: