Kris_Zhang
Kris_Zhang

Reputation: 17

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

Upvotes: 1

Views: 67

Answers (2)

Neo78
Neo78

Reputation: 61

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.

Upvotes: 0

Usama
Usama

Reputation: 1225

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');

Upvotes: 1

Related Questions