Issues with background image and linear gradient

HTML-CSS
1

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: https://codepen.io/francesca829/pen/rqMxyR

Any help is much appreciated!

2

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

3

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 postimages.org for codepen, there are also other methods available like google drive, dropbox etc.

4

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.

5

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: