'CSS Background Image using url() Not Displaying

I recently have being following this tutorial on youtube https://www.youtube.com/watch?v=FazgJVnrVuI and I am up to a part where I am adding images (around 1 hour in). I have tried everything I could and still it doesnt show. I would love some help. Thanks :)

Here is my code :

css

...

 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0% rgba(17, 17, 17, 0.6) 100%), url('/images/pic2.jpg');

...

My file directory looks like this

Main folder

Images/

  pic1.svg

  pic2.jpg

  pic3.jpg

html and css all in the main folder.

This error also pops up

invalid property value

css


Solution 1:[1]

I think the issue is both with the URL and linear-gradient or either of them. If your code is in main folder and images are in the images folder then URL should be url('images/pic2.png'). Also, try to change the linear gradient to test if it works.

background-image: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%), url('images/pic2.png');

Solution 2:[2]

If the path to your images is right, using VSC for example, you should automatically see if it's the right path cause typing it will make appear a kind of pop up, where you can choose your file's URL.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Usama
Solution 2 Neo78

Related Questions