Question: I am just starting out in the web development world so I am a beginner when it comes to html and css.

I am trying to create a background image for a paragraph of text on my web page but the image will not load for some reason.

**Image URL**  

I am 100% sure I have the URL correct (the file is stored on a local directory) because using an image tag,

img src='C:/..../myimage.png' 

works perfectly fine. Using background-image in CSS with this directory does not work though.

I am also trying out different IDEs to see which I like best. I started out using notepad++ and chrome browser. Using this, the background-image works fine. If I use Brackets, the background image does not show, even though it uses chrome as a live feedback tool.

Could someone please help me understand why this is not working?

Here is the html and css I have written. Thank you for any help you can give.

**HTML:**

```
<p id='bgimgex'>Here is a paragraph of text which has a background image</p>

```

**CSS**

```
#bgimgex{

    font-size:1.7em;
    color:cyan;
    margin:auto;
    width:50vw;
    background-position:center;
    background-image:url('C:/Users/Adad Dayos/Desktop/phase 2/course work/HTML series/HTML5_course_1/mod 5/images/melly.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
}

```

Answer: 
The below code is working in all the browsers . I tested in my system. Please check in console (f12), if the browser is unable to load the background-image. I don't see any issues. Also please use file:///C:/Users for background-image

```
    <html>
        <style>
    #bgimgex{

        font-size:1.7em;
        color:cyan;
        margin:auto;
        width:50vw;
        background-position:center;
        background-image:url('file:///C:/Users/Public/Pictures/Sample Pictures/Lighthouse.jpg');
        background-size:100% 100%;
        background-repeat:no-repeat;
    }

    </style>

    <body>
    <p id='bgimgex'>Here is a paragraph of text which has a background image</p>
    </body>
    </html>

```
**SOLUTION:**  

Thank you to Parham Heidari for helping me solve this. I would upvote your answer but I am new to stack exchange and dont have the rep to do so.

So I checked the console in chrome using "inspect element" and saw:

[Console debug info](https://i.stack.imgur.com/RgQP9.png)

This made me realize there was a security issue preventing the browser from retrieving my file. Apparently this happens when you provide a complete directory for a local file rather than a relative directory. So to fix the problem, I changed my url to:

```
background-image:url('../images/melly.PNG');

```

Also, thanks Andrei Gheorghiu for telling me how to fix the issue, even though I am pretty sure I just worked around it anyway.