Doing an online programming course and completely stuck on this bit. Have tried the same thing in Brackets / Atom / Sublime and all do the same thing. I can view an image no probs if it is called in src="" in html but trying to call it as a background image in CSS (either internally or externally) will always give alt text.

I've got copies of the image in all directories to help it locate it and have tried variations of ..// \ " " '' etc.

Any help please! I can't move on until I solve this. This image shows the preview I'm getting: [image link](https://i.stack.imgur.com/vypMt.png)

Code below:

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TEST CSS IMAGE LOCATOR</title>
  <style>
    #Maddie {
      height: 400px;
      width: 250px;
      background-image: url('bluebulletpoint.JPG');
      background: radial-gradient(circle, black, white);
    }
  </style>
</head <body>
<p>This is a picture of Maddie:</p>
<div id="Maddie">
  <img alt="missing picture" </div>
  <br><br>
  <div id="thisworks">
    <img src=bluebulletpoint.JPG>
  </div>
  </body>

</html>
```