CSS Background Image using url() Not Displaying

Question

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

Did you look at the property values you were using? Your linear-gradient setting is invalid, it's lacking the comma needed between the different color settings. Check out the correct syntax on MDN for example and see if that cures things. If not, put a runnable snippet of code into your question so we can see the problem for ourselves. — A Haworth
– A Haworth, Commented May 14, 2022 at 8:34
If you want fill free to go to my github repo at github.com/Kris-Zhang-122507/Blockdum — Kris_Zhang
– Kris_Zhang, Commented May 14, 2022 at 8:46
Sorry, no. SO wants the code within the question, not a link to another site - the problem will arise in future if that site disappears. Remember, SO is trying to build up a repository of useful answers for future readers, not just to solve a problem for one reader at one point in time. — A Haworth
– A Haworth, Commented May 14, 2022 at 8:48

Usama · Accepted Answer · 2022-05-14 08:36:57Z

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

answered May 14, 2022 at 8:36

Usama

1,25315 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Neo78 · Accepted Answer · 2022-05-14 09:02:05Z

0

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.

answered May 14, 2022 at 9:02

Neo78

616 bronze badges

Collectives™ on Stack Overflow

CSS Background Image using url() Not Displaying

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related