why isn't my background-image url working (CSS)?-CodePudding

Here is my (relevant) css code:

li a {
  display: block;
  font-weight:bolder;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  background-image: url('004.jpg')
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}

I've tried the URL with double quotes, single quotes, and no quotes and it still isn't working. Can someone help me with this?

Thanks so much for your wise advice.

CodePudding user response：

Your code works actually (See the snippet below), I did not change anything, only provided the minimum html. It might be because you have the wrong img path. Firstly, you need to move your image to your code/project root directory. After that, try adding ./ or just / before your img name, like so: './004.jpg'/'/004.jpg'.

li a {
  display: block;
  font-weight:bolder;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  background-image: url('https://images.unsplash.com/photo-1612528443702-f6741f70a049?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80')
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}

<li>
  <a href="#">My Text</a>
</li>

More on how to add background image using css here.

CodePudding user response：

Try this. No quotes, and background instead of background-image. Also, make sure that the file path is correct.

background: url(004.jpg);